Bilder und Design mit Microsoft Expression Web

Moderne Webseiten setzen sich meist aus einer Kombination von Text, Bildern und Farben zusammen. Dabei können Bilder als Informationsträger dienen, um einen Text grafisch zu unterstützen, oder auch nur zur Gestaltung und Auflockerung des Textes benutzt werden. Lesen Sie hier, wie Grafiken eingebunden und bearbeitet werden können, aber auch was bei der Auswahl von Formaten beachten werden soll.

Standard Webgrafik-Formate

Im Web werden vorwiegend die komprimierten Grafikformate GIF, JPEG und PNG verwendet. Wobei zum Portable Network Graphics-Format (PNG) erwähnt werden muss, dass es von älteren Webbrowser nicht angezeigt werden kann. Möchte man dieses Format nutzen sollte überlegt und wenn möglich überprüft werden, ob die Zielgruppe noch ältere Browserversionen nutzt. Selten wird auch das Vektorgrafikformat SWF verwendet. Dieses kann aber nur dann im Browser angezeigt werden, wenn dieser über ein Flash-Plugin verfügt.

Einbinden und Verlinken von Grafiken

Um eine Grafik in ein Expression Web Dokument einzubinden, setzen Sie in einem geöffneten HTML-Dokument den Cursor an die Stelle, an der die Grafik angezeigt werden soll. Aktivieren Sie den Menübefehl Einfügen -> Grafik, wählen Sie entweder die Option "aus Datei" oder "von Scanner oder Kamera" und suchen Sie dann die gewünschte Grafik aus. Es öffnet sich das Dialogfenster "Eigenschaften für alternative Darstellungsweisen". Dort können Sie in das Textfeld "Alternative Beschreibung" den so genannten ALT-Tag eintragen, dieser wird angezeigt, solange das Bild geladen wird oder auch wenn ein Bild, zum Beispiel bei einem älteren Browser, nicht angezeigt werden kann. Wenn Sie nicht möchten, dass dieses Dialogfenster bei jedem Einbinden einer Grafik angezeigt wird, dann deaktivieren Sie die Option "Diese Aufforderung beim Einfügen von Bildern zeigen". Haben Sie diese Funktion abgestellt, dann können Sie nach dem Einfügen eines Bildes später im WYSIWYG-Bereich auf das Bild doppelklicken und dadurch das Dialogfenster "Bildeigenschaften" öffnen. Dort können Sie auf der vorderen Registerkarte "Allgemein" auch den ALT-Tag eingeben. Weiterhin haben Sie dort die Möglichkeit eineURLeinzutragen, wenn Sie das Bild mit einer anderen Seite oder mit einem Dokument verknüpfen wollen. Das Dialogfenster "Bildeigenschaften" bietet neben der Registerkarte "Allgemein" ein weiteres Register "Darstellung". Dort lassen sich Optionen, wie die Ausrichtung, die Rahmendicke, die Grafikgröße und auch Angaben zum horizontalen und vertikalen Abstand zum Text einstellen.
Haben Sie ein Bild nicht aus dem Verzeichnis der Website sondern von einer anderen Quelle ihrer Festplatte gewählt, dann erscheint, sobald Sie das Dokument speichern, dann das Dialogfenster "Eingebettete Daten speichern". In diesem Dialogfenster haben Sie die Möglichkeit den Grafiknamen zu ändern. Wenn Sie mehrere Grafiken eingebunden haben klicken Sie auf einen Namen, um diesen über die Schaltfläche "Umbenennen" zu ändern. Außerdem können Sie in diesem Dialogfenster auch das Grafikformat ändern. Das Bild wird dann in dem Stammverzeichnis der Website abgespeichert.
Um sich den Stammordner einer Website übersichtlich zu gestalten, empfiehlt es sich einen eigenen Ordner mit dem Namen "Bilder" oder "Images" anzulegen, um Fotos, Bilder und Grafiken darin zu speichern. Wenn Sie in dem Dialogfeld "Eingebettete Dateien speichern" auf die Schaltfläche "Ordner wechseln" klicken, dann können Sie entweder über den Button "Neuer Ordner erstellen" einen Ordner mit dem Namen "Bilder" oder "Images" anlegen oder falls Sie dies schon gemacht haben den Bilderordner auswählen.

Grafiken und Bilder bearbeiten

Wenn Sie ein Bild aus Microsoft Expression Web heraus mit einem Bildbearbeitungsprogramm verändern oder optimieren wollen, dann wählen Sie das entsprechende Bild aus und klicken mit der rechten Maustaste auf das Bild. Wählen Sie die Option "Öffnen mit >" es klappt ein Auswahlmenü auf, aus dem Sie das gewünschte Bildbearbeitungsprogramm auswählen können. Dafür wird natürlich vorausgesetzt, dass sich eine Bildbearbeitungssoftware auf Ihrem Computer befindet. Je nach Programm genügt es, wenn Sie nach der Bearbeitung die Anwendung schließen und die Frage nach dem Speichern mit einem Klick auf den OK-Button bestätigen. Wenn Sie kein eigenes Bildbearbeitungsprogramm haben, dann können Sie die gängigsten Bildbearbeitungsfunktionen, wie zuschneiden, heller, dunkler, drehen, Kontrast oder transparente Farbe bestimmen auch über die Symbolschaltfläche "Bilder" in Microsoft Expression Web selbst anwenden. Um diese Symbolleiste zu öffnen, wählen Sie über das Menü Ansicht -> Symbolleisten -> Bilder.

Hotspots

Ein Hotspot besteht aus einem Bild und den im Quellcode enthaltenen Bildkoordinaten, mit denen man auf ein anderes Dokument verlinken kann. Oftmals werden Hotspots oder Imagemaps, wie sie auch bezeichnet werden, zur Aufteilung von Regionen eines international vertretenen Unternehmens verwendet. Daneben gibt es aber noch viele weitere Anwendungsbeispiele für Hotspots. Um auf ein Bild einen Hotspot anzuwenden öffnen Sie die Symbolleiste Bilder über das Menü Ansicht -> Symbolleisten -> Bilder. Wählen Sie in der Symbolleiste das gewünschte Hotspotwerkzeug aus. Mit dem rechteckigen und runden Hotspotwerkzeug können Sie mit gedrückter Maustaste von der Mitte aus den Hotspot aufziehen. Sobald Sie die Maustaste loslassen öffnet sich das Dialogfenster "Hyperlink einfügen" auch wenn der ausgewählte Bereich noch nicht ganz ihren Wünschen entspricht, wählen Sie trotzdem zu erst die zu verknüpfende Seite aus und bestätigen Sie mit "OK". Um diesen Hotspot noch zu verschieben oder zu skalieren, wählen Sie die Symbolschaltfläche "Auswählen" (der Pfeil links neben dem rechteckigen Hotspotwerkzeug). Mit dem polygonförmigen Hotspotwerkzeug können Sie wie mit einem Zeichenstift über einzelne Klicks mehrere Punkte auf das Bild setzen, um den Bereich für die Imagemap auszuwählen. Durch einen Doppelklick auf einen Hotspot in der Entwurfsansicht können Sie das Dialogfenster "Hyperlink bearbeiten" öffnen, um die Verknüpfung zu bearbeiten.

Cascading Style Sheets (CSS) benutzen

Über Cascading Style Sheets (CSS) kann die Darstellung einer Seite gesteuert werden. Es gibt interne, externe und inline CSS. Um die Darstellung einer Website einheitlich zu gestalten ist die Verwendung externer CSS empfehlenswert. Es können beispielsweise für unterschiedliche Themenbereiche je ein externes CSS-File generiert werden, der Vorteil liegt darin, dass später nur eine, nämlich die CSS-Datei, geändert werden muss und alle Dokumente, die sich auf diese externe CSS-Datei beziehen, werden somit automatisch aktualisiert. Interne Stylesheets werden meist zusätzlich zu externen angewandt, zum Beispiel wenn auf einer bestimmten Seite eine weitere Darstellung eines bestimmten Inhalts beschrieben wird. Zur Darstellungsbeschreibung ein einzelnes Seitenelementes oder einer bestimmte Folge davon werden inline CSS benutzt. Wenn Sie eine Website mit einer Vorlage erstellt haben, und die Style Sheets bearbeiten möchten, dann öffnen Sie die geteilte oder die Code-Ansicht und scrollen im Quellcode-Bereich nach oben in den Head-Bereich. Dort sehen Sie beispielsweise folgenden Quellcode für ein externes CSS:

Klicken Sie mit gedrückt gehaltener Strg-Taste auf die Verknüpfung "styles/style1.css". Es öffnet sich in einem neuen Register im Dokumentfenster die entsprechende CSS-Datei. Über das Aufgabenfenster unten rechts "Formatvorlagen verwalten" haben Sie auch die Möglichkeit einzelne CSS-Files zu bearbeiten. Klicken Sie auf das nach rechts zeigende Dreieck und wählen Sie dann die Registerkarte "Formatvorlagen verwalten" aus.

Darstellung: Formatvorlage verwalten in MS Expression Web

Rechts unten können Sie über das Aufgabenfenster "Tageigenschaften" die Registerkarte " CSS-Eigenschaften" öffnen, um darin die Optionen für die Cascading Style Sheets zu ändern. Wenn Sie internes Stylesheet erstellen möchten, dann wählen Sie den Menübefehl Format -> Neue Formatvorlage. Daraufhin öffnet sich das gleichnamige Dialogfenster. Das Programm schlägt dann den Namen ".neueFormatvorlage1" vor. Sie können hier auch einen individuellen Begriff für die Formatvorlage eingeben oder einen aus der Dropdown-Liste auswählen. Wenn Sie die Einstellungen für ein neues CSS in dem Dialogfenster eingegeben haben und anschließend auf "OK" klicken, dann ist diese noch nicht gespeichert. Im Quellcode wird eine neue noch nicht gespeicherte Formatvorlage so angezeigt:

Speichern Sie die Registerkarte "Ohne_Titel_1.css" über das Menü Datei -> Speichern in den Ordner "Styles", dabei können Sie dem CSS-File einen anderen Namen zum Beispiel "design.css" geben.

Seiteneigenschaften formatieren

Um das Dialogfenster "Seiteneigenschaften" zu öffnen, klicken Sie mit der rechten Maustaste auf die geöffnete HTML-Seite, deren Seiteneigenschaften Sie ändern möchten. Und wählen die Option "Seiteneigenschaften" aus. In diesem Dialogfenster gibt es mehrere Register. Auf dem ersten Register können Sie einer Webseite einen Hintergrundsound zuweisen. Beachten Sie dabei bitte den Rechtlicher Hinweis: Urheberrechtsschutz beachten. In dem Register "Formatierung" können Sie sowohl ein Hintergrundbild oder ein Wasserzeichen auswählen, die Hintergrundfarbe, als auch die Farben für Text und Hyperlinks einstellen. Eigentlich versteht man ja unter einem Wasserzeichen ein halbtransparentes Bild. Doch hier ist mit Wasserzeichen ein feststehendes Bild im Hintergrund gemeint, das heißt es bleibt beim Scrollen der Seite fest an seinem Platz. Hintergrundbilder, die kleiner als die normale Bildschirmseite sind, werden gekachelt. Wenn Sie kein halbtransparentes Bild zur Verfügung haben, dann können Sie dieses auch über die Bildbearbeitungsfunktion von Microsoft Expression Web bearbeiten. Lesen Sie dazu den Abschnitt Grafiken und Bilder bearbeiten.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Tabellen und Layoutvorlagen

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project