Lerne, wie du mit HTML und CSS Bilder in Webdesigns platzieren kannst.
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.
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.
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.
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.
#headerImg {
...
background-image:url(images/europa_header.jpg);
height:500px;
}
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 „“, ungefähr bei Zeile 42.
Gib die Zeichenfolge
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.
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"
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"
Suche den Abschnitt „“, ungefähr bei Zeile 56.
Wiederhole die eben gelernten Schritte, um ein weiteres Bild hinzuzufügen. Gib die Zeichenfolge
Füge folgende Properties zum IMG -Tag hinzu:
Klicke auf Vorschau in Browser. Überprüfe die Darstellung der Bilder in deinem bevorzugten Webbrowser.
Speichere die Datei, damit deine Änderungen angezeigt werden.