Die BuB Siegel Website

Geschichten und Urlaubsfotos

Hallo liebe Besucher......hier ist eine Baustelle !!!

Des isch de Originaltext vu de Vorlage......

…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 sowohl für die Schriftgrößen, als auch für die Breite und Höhe die Einheit em. Diese Einheit ist relativ zu den Einstellungen des Benutzers und sobald man die Schriftgröße ändert, passt sich auch z. B. die breite der Website an.

Somit gelangen auch ältere Browser (z. B. Internet Explorer 6), die keinen vollwertigen Zoom sondern nur Schriftvergrößerung beherrschen, in den Genuss eines Zoom-Layouts.

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. Sowohl die Erstellung des Designs als auch die Umsetzung des Templates wurden 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
  1. Gold
  2. Silber
  3. 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.