Holz & Eisen GmbH

Herzlich Willkommen!

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Informationen zum Template

Hallo lieber Expression-Nutzer hier sehen Sie ein neues Template für Expression Web 2. In den folgenden Absätzen können Sie einige Informationen rund um das Template erfahren. Ich wünsche Ihnen viel Spaß beim Lesen.

Features des Templates

Als erstes wenden wir uns den Features dieses Templates zu. Dadurch machen Sie sich nicht nur mit den Funktionen bekannt sondern erfahren auch wie Sie einzelne Funktionen anpassen können.

Die Einheit `em` im Einsatz

Das Template benutzt für die Schriftgrößen, die Einheit em. Diese Einheit ist relativ zu den Einstellungen des Benutzers und dadurch sind auch ältere Browser (z. B. Internet Explorer 6) in der Lage, ohne das man die Standard-Einstellungen ändert, die Schriftgrößen zu ändern.

Lightbox-Effekt

Darüberhinaus ist für die Bilder ein Lightbox-Effekt eingebaut und zwar die FancyBox. Sie müssen die anklickbaren Vorschaubilder lediglich innerhalb eines Blockelements (z. B. div, p oder ul) unterbringen und diesem Blockelement ein Klasen-Attribut mit dem Wert fotogalerie zuweisen. Hier ein Beispiel:

<div class="fotogalerie">
    <p>
        <a href="bild.jpg" title="Beschreibung des Bides">
            <img src="bild-klein.jpg" alt="Alternativer Text" />
        </a>
    </p>
    …
</div>

Wenn Sie die Bilder auf dieser Art innerhalb eines solchen Box-Elements einbauen, dann bekommen alle Bilder den Lightbox-Effekt zugeweisen. Der Inhalt des title-Attributs dient dann als Bildunterschrift.

Das Skript erkennt ob mehrere Bilder innerhalb einer Box eingebunden sind und bindet eine einfache Galeriefunktion ein und man hat die Möglichkeit mittels Pfeil-Tasten oder in dem man die Pfeile anklickt, zwischen den einzelen Bildern zu navigieren.

CSS-Datei für die Druckausgabe

Das Template besitzt auch eine CSS-Datei (print.css) für die Druckausgabe: media="screen". Durch das Attribut media und den Wert print, erkennt der Browser das es sich hierbei um CSS-Datei für die Druckausgabe handelt und lädt diese beim Drucken oder bei der Druckvorschau.

Der Umgang mit Bildern

Alle Bilder in diesem Template bekommen einen weißen Hintergrund und einen hellgrauen Rahmen zugewiesen. Möchten Sie das die Bilder keinen solchen Effekt bekommen, dan weisen Sie dem Bild einen zusätzliche Klasse zu:

<img src="bild.png" alt="…" class="kein-bild-effekt" />

Möchten Sie ein Bild links bzw rechst ausrichten, dann weisen Sie dem Bild class="bild-links" bzw. class="bild-rechts" zu. Wenn Sie mehrere Bilder in einer Galerie zusammenfassen möchten, dann weisen Sie dem umschließenden Block-Element einen zusätzlichen klassenwert zu: class="fotogalerie bild-abstand". Dadurch erhalten die Bilder zusätzlichen Abstand, was die visuellen Erscheinung verbessert.

Rechtliche Aspekte

Dieses Template wurde in Auftrag von Microsoft Deutschland realisiert.
Die grafische Vorlage stammt von Christoph Raffelt. Die Umsetzung des Templates – (X)HTML und CSS – wurde von Vladimir Simovic durchgeführt.

Sie können dieses Template auch für Ihre kommerzielle Projekte einsetzen und an Ihre Bedürfnisse anpassen.

Die Bilder stammen von www.unprofound.com.

Ein paar Element-Beispiele

Im folgenden sehen Sie ein wie ein paar gängige Elemente gestylt sind. Zuerst sehen Sie ein Zitat (<blockquote>), dann folgen drei Überschriften (<h3>, <h4> und <h5> ) und am Ende sehen Sie eine Aufzählungsliste (<ul>), eine nummerierte Liste (<ol>) und einen Absatz (<p>).

Ich bin ein Zitat: "Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular."

Eine Überschrift 3. Ordnung `<h3>`

Die Überschrift dritter Ordnung dient hier als die oberste Überschrift einzelner Unterseiten, da die Überschriften erster und zweiter Ordnung für Hauptüberschrift und den Sloafn der Website "reserviert" sind.

Eine Überschrift 4. Ordnung `<h4>`

Eine Überschrift 5. Ordnung `<h5>`

Butter
Brot
Milch

Gold
Silber
Bronze

Ein Absatz: Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.

Familie Schulz