Ich habe da mal etwas vorbereitet. Wir machen jetzt einen kleinen Exkurs zu Gimp:|Ich habe mit Gimp ein Template vorbereitet. So soll meine Webseite später aussehen:
Klicke auf das Bild für die Darstellung in Originalgröße[/col]
[col]Einen dunkelblauen Kopfbereich mit einem schönen Verlauf, ein Hintergrundmuster, einen Bereich für die Navigation und ein Footer.
Ziel ist es, den Inhalt-Bereich so zu gestalten, dass keine Scrollbalken angezeigt werden, wenn Text eingefügt wird. Der Inhalt Bereich soll sich an den Inhalt anpassen und "mitwachsen".
Das Template muss also so zerschnitten werden, dass es nicht an eine feste Höhe gebunden ist. In Gimp kann man für diesen Vorgang Hilfslinien aus den Linealen am linken und oberen Bildrand ziehen und sie auf das Template platzieren.
Das sind die Stellen, wo das Template durchgeschnitten wird. Zu beachten ist hier, dass die Hilfslinien den Header so abtrennen, dass alle Bereiche, die sich nicht wiederholen sollen darin enthalten sind. Das Gleiche gilt für den Footer.|
Klicke auf das Bild für die Darstellung in Originalgröße[/col]
Über das Menü [b]Bild - Transformation - Guillotine[/b] wird das Template automatisch in die 3 Teile geschnitten.
[popup]http://kompozer-8.kreativ-workshops.net/forties/screens/lektion2-2.png[/popup]
An Dateigröße kannst du sparen, wenn du die das Mittelstück noch verkleinerst. Es ist noch sehr hoch. Da sich dieser Bereich wiederholen soll, reicht es, wenn er auf ein ganz schmales Stück zugeschnitten wird.
Sie werden nun einzeln gespeichert; als:
- header.jpg
- footer.jpg
- mitte.jpg
Klicke auf das Bild für die Darstellung in Originalgröße[/col]
Übung
Übungsdateien
Lege eine neue Struktur an. Speichere die Bilder in einen separaten Ordner. Achte dabei wie immer auf Kleinschreibung und Umlaute bzw. Sonderzeichen.
Öffne eine neue Html-Datei.
Füge die gewohnte Struktur mit den 5 Div ein: Seite, Kopf, Menü, Inhalt, Footer.
- Kopf
Füge nun die Hintergrundgrafik header.jpg in den Kopf deiner Seite ein. Stelle die Höhe der Hintergrundgrafik ein.
Da KompoZer Divs ohne Inhalt löscht (eine Hintergrundgrafik ist kein Inhalt), musst du noch deine h1 in den Kopf einfügen.
Footer
Füge die Hintergrundgrafik footer.jpg als Hintergrundgrafik in den Footer ein. Stelle die Höhe des Div auf die Höhe der Hintergrundgrafik ein.
Füge auch hier einen Text ein, sodass der Div nicht vom KompoZer gelöscht wird.
Seite
Stelle die Breite der Seite auf 900px ein, denn das ist die Breite der Grafiken. Richte sie mittig auf deiner Seite aus mit Außenabstand-links und rechts Auto.
Füge als Hintergrundgrafik mitte.jpg ein. Wiederholung nur vertikal.
Inhalt, Menu
diese beiden Div werden wie gewohnt auf dem Template ausgerichtet. Achte darauf, dass du nur mit Außenabständen arbeitest, sodass du keine Scherereien mit dem Internet Explorer (7 und 8) bekommst.
body
im body wird ein kleiner Ausschnitt aus dem Hintergrundmuster eingefügt. Er wird horizontal und vertikal gekachelt.
Lösung: Beispiel 1
und weil die Bastelei so viel Spaß gemacht hat, habe ich noch ein solches Template vorbereitet:
Lösung: Beispiel 2
Viel Spaß beim Nachbasteln!
.
