WEBSCHOOL    EXPRESSION WEB 4    FRONTPAGE    DREAMWEAVER

EXPRESSION WEB 4

Bilder einfügen

Reicht es, ein Bild in den freien Raum einer Seite zu stellen, geht das problemlos mit der Befehlsreihenfolge:
  •    
  • Im Fenster Eigenschaften für Barrierefreiheit beschreibende Bildtexte eingeben ...
     

     
  • OK

Möchte man das Bild in einen Text einfügen,

  • stellt man den Cursor an eine beliebige Textstelle, klickt nach den oben beschriebenen Schritten vorsichtig in den Krapfen ...
     

     
  • ... wählt nach einem Rechtsklick die Option
     

     
  • im Register Darstellung die gewünschte Ausrichtung...
     

     
  • und begutachtet das Ergebnis in der Browservorschau
     

 

Bildergalerie anlegen

Aus einer Reihe kleiner Bilder (Miniaturdarstellung) kann der User mittels Mausklick eines oder mehrere nacheinander in einem größeren Format darstellen. Expression Web 4 übernimmt die Arbeit der Miniaturisierung:
  •  
     
  • Im Registerblatt AutoMiniaturansicht Bildhöhe, Rahmen, eventuell Kantenaussehen festlegen:
     

     
  • Benötigte Bilder in der Ordnerliste markieren (Strg-Taste gedrückt halten und Bild für Bild anklicken)
     

     
  • Markierte Bilder mit der Maus in die Seite ziehen
  • Für jedes Bild wird das Fenster Eigenschaften für Barrierefreiheit eingeblendet ...
  • Erstes Bild mit Mausklick markieren, danach Rechtsklick in das Bild ...
  • Option Automatische Miniaturansicht wählen
     

     
  • Die restlichen Bilder verkleinern
     

     
  • Speichern
  • In der Browservorschau sieht man, dass nach einem Klick in ein Miniaturbild im aktuellen Fenster die Originaldatei geöffnet wird. Zurück in die Galerie? Siehe Abb. unten
     

     
  • Soll sich das Originalbild in einem neuen Fenster zeigen? Klick in die Miniatur
     

     
  • im Fenster Link bearbeiten Klick auf Zielframe...
  • im Fenster Zielframe "Neues Fenster" wählen
     

     

Also diese aneinander geklebten Thumbnails machen optisch keinen schlanken Hals. Das hübschen wir auf:

  • Rechtsklick in das erste Bild
     

     
  • Im Registerblatt Darstellung die Rand -abstände eingeben:
     

     
  • Im Panel CSS-Eigenschaften Rechtsklick auf Inlineformatvorlage; Klick auf Neue Formatvorlagenkopie
     

     
  • Einstellungen wie unten abgebildet vornehmen:
     

     
  • Bild 2 markieren, im Panel CSS-Eigenschaften Rechtsklick auf Aktueller Name (im Beispiel auto-style2)
     

     
  • OK
    Jetzt sollte sich die Miniaturreihe so zeigen: