Viele möchten ihre Webseiten mit Hintergrundbildern
verschönern. Das sieht nicht nur gut aus, es unterstreicht
oft auch das Thema der Seite.
Allerdings gibt es einige Dinge zu beachten, damit es
gut aussieht und die Seite lesbar bleibt.
Was ist das Ziel?
Am Ende kannst du nicht nur ganzen Webseiten, sondern auch
einzelnen HTML-Elementen Hintergrundbilder verpassen.
Du bekommst ein Gefühl für das, was gut aussieht und
kannst notfalls auch Bilder nachbearbeiten.
Obiger Link ist das Bild für die folgende Aufgabe.
Aufgabe 1
Lasse dir eine einfache Webseite mit Text erstellen oder nimm eine bereits vorhandene Seite. Hole dir aus dem Gruppenverzeichnis oder von obigen Link das Bild ab_02_bg1000x750.jpg. Gib der Seite dieses als Hinterundbild.
Aufgabe 2
Was passiert, wenn das Bild kleiner als das Browserfenster ist?
Aufgabe 3
Passe das Hintergrundbild so wie im Video beschrieben an. Was musstest du alles beachten?
Aufgabe 4
Erstelle selbst als Hintergund einen Farbverlauf von links nach rechts. Was musstest du schreiben? Gib das mit den Farben deiner Wahl an.
Vertiefung
Aufgabe 5
Das Abschneiden der Ränder erfolgte im Video immer rechts und unten. Wie kann man das zentriert erfolgen lassen?
Aufgabe 6
Gib bitte einer Textbox (div oder p) ein Hintergrundbild. Was hast du geschrieben?
Aufgabe 7
Gib bitte einer Liste oder einer Tabelle einen Farbverlauf. Wie hast du das bewerkstelligt?
Aufgabe 8
Kann man auch einzelnen Elementen, also Tabellenzellen oder Listeneinträgen eigene Hintergründe geben?
Noch ein Zusatz, nur für die Schnellen!
Aufgaben dazu
Aufgabe 9
Hintergrundbilder erschweren oft die Lesbarkeit. Welche Eigenschaften erschweren die Lesbarkeit?
Aufgabe 10
Suche ein Bild, das diesbezüglich ungeeignet ist. Auf den Schulrechnern ist GIMP installiert. Lade das Bild in GIMP. Im Menü Farben findest du viele Einstellmöglichkeiten. Welche "Operationen" auf ein Bild verbessern die Lesbarkeit, machen es also als Hintergrundbild brauchbarer?
Eine komplexe Aufgabe ohne KI...
... ist hier nicht notwendig.
Zusammenfassung
Was muss man wissen/können?
Du musst wissen,
wie man Hintergrundbilder einbindet,
wie man diese in der Größe anpasst und
wie man diese etwas nachbearbeiten kann, damit die Lesbarkeit verbessert wird.
Was können anschließende Themen sein?
Bei den Tabellen hast du schon gesehen, wie wichtig Abstände
sind, damit die Webseite das Auge erfreut. Um Abstände
geht es im nächsten Teil.
