Lernen Sie, wie Sie mit HTML und CSS Bilder in Webdesigns platzieren können.
work-with-html-images_1408x792

Sehen Sie selbst, wie einfach es ist, Bilder per CSS und HTML zu Web-Seiten hinzuzufügen. Wenn Sie in eigenen Webdesigns mit Bildern arbeiten, denken Sie daran, dass Sie über die entsprechenden Nutzungsrechte verfügen oder die Erlaubnis des Rechteinhabers einholen müssen. Achten Sie auch auf die korrekte Angabe des Urheberrechts.

images-web-design-step1

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

In dieser Übung fügen Sie ein Banner und zwei Bilder zu Inhaltsabschnitten hinzu.

Vorbereitung

Laden Sie die Projektdateien herunter, und extrahieren Sie sie. Öffnen Sie die Datei html-images.html in Dreamweaver, und zeigen Sie die CSS-Datei styles.css in der Ansicht „Teilen“ an.

Hinweis: Falls in Dreamweaver nicht die gesamte Web-Seite angezeigt wird, verschieben Sie die Trennleiste zwischen Code- und Live-Ansicht, bis die Web-Seite in der Live-Ansicht komplett zu sehen ist.

images-web-design-step0

Titelbild mit CSS hinzufügen

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

Suchen Sie den Abschnitt „/* -- Step 1: Start Here -- */“, und fügen Sie die Property background-image zum CSS-Selektor #headerimg hinzu.

Navigieren Sie im Ordner „images“ zum Bild europa_header.jpg, und klicken Sie auf „Öffnen“. Das Bild wird erst angezeigt, wenn Sie die Höhe des Bild-Containers definiert haben. Fügen Sie die Property height: mit dem Wert 500px hinzu.

images-web-design-step2a

CSS

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

images-web-design-step2b

Bild mit HTML hinzufügen

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

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

Geben Sie die Zeichenfolge <img src=" ein, und navigieren Sie zum Bild jupiter_body.jpg im Ordner „images“. Klicken Sie auf „Öffnen“.

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

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

images-web-design-step3a

HTML

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

images-web-design-step3b

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

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

Fügen Sie folgende Properties zum IMG-Tag hinzu:

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

 

images-web-design-step4

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ügen Sie folgende Property zum IMG-Tag hinzu:

alt="Jupiter's Great Red Spot"

images-web-design-step4b

Weiteres Bild hinzufügen

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

Wiederholen Sie die eben gelernten Schritte, um ein weiteres Bild hinzuzufügen. Geben Sie die Zeichenfolge <img src=" ein, und navigieren Sie zum Bild sunrise_body.jpg im Ordner „images“. Klicken Sie auf „Öffnen“.

Fügen Sie folgende Properties zum IMG-Tag hinzu:

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

images-web-design-step5

Klicken Sie auf Vorschau in Browser, und überprüfen Sie die Darstellung der Bilder in Ihrem bevorzugten Webbrowser.

Speichern Sie die Datei, damit Ihre Änderungen angezeigt werden.

images-web-design-step6
04/13/2018
War diese Seite hilfreich?