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.
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 auswählen -> Format -> Eigenschaften
Rechte Maustaste auf Bild -> Bildeigenschaften
Extras -> Seiteneditoroptionen -> Autominiaturansicht
Rechtsklick auf Bild -> Automatische Miniaturansicht
Es gibt fünf Möglichkeiten, ein Bild zu positionieren:
Über die Bilder-Symbolleiste kann man einfache Bildbearbeitungen durchführen: Drehen, Spiegeln, Kontrast, Helligkeit, Zuschneiden, Transparenz, Abschrägung, Hotspots, Thumb
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.
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
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.
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.
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.