Bilder

Publikation von Bildern im Internet erfordert eine vorherige Bearbeitung der Bilder. Meist benötigt man die Bilder in 3 Größen:

Expression Web unterstützt nur die Herstellung von Vorschaubildern aber erlaubt nicht die Verkleinerung auf eine andere Größe.

Bild einfügen

Zuerst das Bild aus seinem aktuellen Speicherort im Dateisystem in die Siteansicht von Expression Web kopieren (immer im Rahmen von Expression Web und mit dem Windows Explorer).

Einfügen -> Bild -> aus Datei

oder

Symbolleiste „Allgemein“ -> Bild aus Datei einfügen

Bild formatieren

Bild auswählen -> Format -> Eigenschaften

oder

Rechte Maustaste auf Bild -> Bildeigenschaften

Einstellung der Vorschaugröße

Extras -> Seiteneditoroptionen -> Autominiaturansicht

Anwendung

Rechtsklick auf Bild -> Automatische Miniaturansicht

Bilder am Text ausrichten

Es gibt fünf Möglichkeiten, ein Bild zu positionieren:

Bilder bearbeiten

Über die Bilder-Symbolleiste kann man einfache Bildbearbeitungen durchführen: Drehen, Spiegeln, Kontrast, Helligkeit, Zuschneiden, Transparenz, Abschrägung, Hotspots, Thumb

Mehrere Bilder einfügen

Um mehrere Bilder in einem Raster einzufügen, benötigt man eine Tabelle. Man fügt die Tabelle ein und in jede Zelle ein Bild.

Tabelleneigenschaften festlegen

Jetzt muss man die Tabelle noch anpassen, damit die Bilder zusammenrücken.

Tabelle markieren -> rechte Maustaste -> Tabelleneigenschaften

Breite angeben wegklicken.

Zelleneigenschaften festlegen

Zelle markieren -> rechte Maustaste -> Zelleneigenschaften
Horizontale Ausrichtung -> Zentriert
Vertikale Ausrichtung -> Mitte

Damit wird sichergestellt, dass hoch- und querformatige Bilder immer in der Mitte einer Tabellenzelle angeordnet werden.

Bilderordnung

Vorzugsweise speichert man die Bilder in einen Ordner, zum Beispiel „images“. Sind es mehr, dann eben in weiteren Unterverzeichnissen.

Wenn man diesen Ordner in Expression Web anlegt und dann die bereits im Wurzelverzeichnis importierten Bilder in diesen Ordner kopiert, ändert Expression Web in allen Dateien, in denen diese Bilder referenziert sind den Pfad.

Lightbox

Die so eingefügten Bilder sind „klassisch“ formatiert. Moderne CSS-Techniken verbunden mit JavaScript erlauben eine ansprechendere Bildverwaltung. Sehr verbreitet ist das kostenlose Paket „Lighbox“ von Lokesh Dhakar. Der Vorteil von Lightbox ist vors allem, dass zur Ansicht eines einzelnen Bildes nicht das das ganze Hauptfenster neu aufgebaut werden muss.

Lightbox benötigt die drei Ordner css, images und js. Weiters muss eine Datei, die LightBox verwendet die Dateien in diesen Ordnern referenzieren, indem folgende Zeilen im Header-Teil einer Datei angelegt werden:

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></<script>
<script src="js/lightbox.js" type="text/javascript"></script>
<link href="css/lightbox.css" rel="stylesheet" />
<link href="css/screen.css" rel="stylesheet" />

Um ein Bild einzufügen, verwendet man das Konstrukt

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Um mehrere zusammengehörige Bilder einzufügen, verwendet man einen Albumnamen als Zusatz, zum Beispiel “[landschaften]”:

<a href="images/image-1.jpg" rel="lightbox[landschaften]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[landschaften]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[landschaften]">image #3</a>

Dieser gemeinsame Begriff verbindet diese Bilder zu einem Album. Wenn man in diesen durch einen Namen verbundenen Bildern eines der Bilder anklickt, kann man mit Links-Rechts-Navigation durch das Album scrollen.

Wenn man seine Bilder einmal mit Lightbox formatiert hat, wird man diesen Komfort nicht mehr missen wollen.

Ergänzende Literatur