Lerne, wie du mit HTML und CSS Bilder in Webdesigns platzieren kannst.
Abstrakte Grafik in Grün, Orange, Gelbbraun und Grau mit Webdesign-Elementen

Entdecke, wie einfach es ist, Bilder per CSS und HTML zu Web-Seiten hinzuzufügen. Wenn du in eigenen Webdesigns mit Bildern arbeitest, denke daran, dass du über die entsprechenden Nutzungsrechte verfügen oder die Erlaubnis des Rechteinhabers einholen musst. Achte auch auf die korrekte Angabe des Urheberrechts.

Vorher: Web-Seite mit Text. Nachher: Bilder machen die Seite interessanter und ansprechender.

Mit Bildern kannst du Web-Seiten optisch aufwerten und Besuchern zusätzlichen Kontext bieten. Für die Platzierung der Bilder kannst du entweder CSS oder HTML verwenden.

In dieser Übung fügst du ein Banner und zwei Bilder zu Inhaltsabschnitten hinzu.

Vorbereitung.

Lade die Projektdateien herunter. Extrahiere und speichere sie. Öffne die Datei html-images.html in Dreamweaver. Zeige die CSS-Datei styles.css in der Ansicht „Teilen“ an.

Hinweis: Falls in Dreamweaver nicht die gesamte Web-Seite angezeigt wird, verschiebe die Trennleiste zwischen den Ansichten „Code“ und „Live“, bis die Web-Seite in der Ansicht „Live“ komplett zu sehen ist.

Ein Cascading Stylesheet (CCS) ist in der Ansicht „Teilen“ in Dreamweaver geöffnet.

Ein Titelbild mit CSS hinzufügen.

Mit CSS lassen sich strukturierende oder dekorative Bilder wie z. B. Hintergründe oder Titelbilder platzieren.

Suche den Abschnitt „/* -- Step 1: Start Here -- */“. Füge die Property background-image zum CSS-Selektor #headerimg hinzu.

Navigiere im Ordner „images“ zum Bild europa_header.jpg. Klicke auf „Öffnen“. Das Bild wird erst angezeigt, wenn du die Höhe des Bild-Containers definiert hast. Füge die Property height: mit dem Wert 500px hinzu.

Ein Hintergrundbild wird zum Stylesheet hinzugefügt.

CSS.

#headerImg {
  ...
  background-image:url(images/europa_header.jpg);
  height:500px;
}

Ein Foto von Europa, einem der Jupitermonde, wird als Hintergrundbild zum Stylesheet hinzugefügt.

Ein Bild mit HTML hinzufügen.

Verwende das IMG-Tag in HTML, um Bilder als Teil eines Inhaltsabschnitts oder für den barrierefreien Zugriff (für Anwender mit Behinderungen) zu definieren.

Klicke auf Quellcode. Scrolle nach unten zum Abschnitt „<!--- Add second image here --->“, ungefähr bei Zeile 42.

Gib die Zeichenfolge <img src=" ein. Navigiere zum Bild jupiter_body.jpg im Ordner „images“. Klicke auf „Öffnen“.

Du wirst feststellen, dass das Bild zu groß für den zugehörigen Container ist und deshalb nicht korrekt angezeigt wird. Daher wirst du im nächsten Schritt die Größe des Bilds ändern, damit es in den Container passt.

Hinweis: Das IMG-Tag ist selbstschließend. Du musst nur einen Schrägstrich „/“ vor der spitzen Klammer „>“ eingeben.

Mit dem IMG-Tag in HTML können Bilder zum Inhalt einer Seite oder für den barrierefreien Zugriff hinzugefügt werden.

HTML.

<img src="images/jupiter_body.jpg" />

Ein HTML-Tag „img src“ gibt die Quelle eines Fotos auf einer Web-Seite an.

Die Properties „width“, „height“ und „alt“ festlegen.

HTML-Bilder werden standardmäßig in ihrer vollen Größe hinzugefügt. Du kannst die Bildgröße über die Properties „width“ und „height“ anpassen.

Füge folgende Properties zum IMG-Tag hinzu:

width="500px" height="500px"

 

Ein HTML-Tag „img src“ gibt die Quelle eines Bilds einschließlich Abmessungen an.

Das ALT-Attribut enthält eine Kurzbeschreibung des Bilds für den Fall, dass es im Browser nicht geladen werden kann oder soll. Diese Beschreibung wird außerdem von Bildschirm-Leseprogrammen für Anwender mit Behinderungen gelesen.

Füge folgende Property zum IMG-Tag hinzu:

alt="Jupiter's Great Red Spot"

Ein HTML-Tag „img src“ gibt die Quelle eines Bilds einschließlich Abmessungen und alternativem Text an.

Ein weiteres Bild hinzufügen.

Suche den Abschnitt „<!--- Add third image here --->“, ungefähr bei Zeile 56.

Wiederhole die eben gelernten Schritte, um ein weiteres Bild hinzuzufügen. Gib die Zeichenfolge <img src=" ein. Navigiere zum Bild sunrise_body.jpg im Ordner „images“. Klicke auf „Öffnen“.

Füge folgende Properties zum IMG-Tag hinzu:

<img src="images/sunrise_body.jpg" width="500px" height="500px" alt="Gale Crater" />

Ein HTML-Tag „img src“ gibt die Quelle eines Bilds einschließlich Abmessungen und alternativem Text an.

Klicke auf Vorschau in Browser. Überprüfe die Darstellung der Bilder in deinem bevorzugten Webbrowser.

Speichere die Datei, damit deine Änderungen angezeigt werden.

Über „Vorschau in Browser“ lassen sich Hyperlinks und die Darstellung von Bildern im bevorzugten Webbrowser überprüfen.
03/07/2022
War diese Seite hilfreich?