Lektion 2 - Template vertikal variabel

Antworten
Admin
Administrator
Beiträge: 83
Registriert: Di 19. Aug 2014, 10:47

Lektion 2 - Template vertikal variabel

Beitrag von Admin » Di 19. Aug 2014, 11:31

[col]Eine weitere Form eine Webseite zu gestalten ist ein grafisches Template einzubinden. Die Webseite wird in Form eines Bildes erstellt. Mit einem Grafikprogramm, wie z.B. Gimp oder Photoshop, schneidest du das Bild in Stücke. Diesen Vorgang nennt man auch "slicen".

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]
[col]Achte darauf, dass die Dateigröße noch vertretbar bleibt.

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
Jetzt muss das Template nur noch in die Html-Seite eingefügt werden.|#
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.
Hast du dein Template so weit fertig? Dann sieht es bestimmt so ähnlich aus wie meines:

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!

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 2 - Template vertikal variabel

Beitrag von kp2709 » Di 2. Sep 2014, 16:09

hi,
habe heute einen guten tag, mal schaun ob`s auch was geworden ist :| .
http://womo.reikuma.bplaced.de/web/web- ... piel1.html
http://womo.reikuma.bplaced.de/web/web- ... piel2.html

dank für`s anschauen

gruß
kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 2 - Template vertikal variabel

Beitrag von anke » Di 2. Sep 2014, 17:17

Hallo Kurt

die Übungen sind super geworden. Nur beim roten Beispiel wird unter dem Template noch ein Streifen vom Inhalt angezeigt. Vielleicht bekommst du den noch weg ;)

Hellriders
Beiträge: 40
Registriert: Di 18. Aug 2015, 23:02

Re: Lektion 2 - Template vertikal variabel

Beitrag von Hellriders » Di 13. Okt 2015, 11:11

hi,
diesmal habe ich es ohne nachzuschauen zusammengebastelt ;)
ich bin mir nicht sicher ob man es so lösen sollte wie ich es gemacht hab.

lektion2.html

gruß micha

camouflage1984
Beiträge: 244
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 2 - Template vertikal variabel

Beitrag von camouflage1984 » Di 13. Okt 2015, 18:30

Hallo Micha

Du kannst es auch so lösen, es hat aber einen kleinen Nachteil!
Deine klasse rechts hat eine feste Höhe von 110px, damit wird, wenn mehr Inhalt ist, dieser über den Container hinausgeschrieben und über das footer Bild ausgegeben.
Das passiert mit dem Beispiel in der Lektion nicht, da wächst der Container mit!

Du solltest klassen verwenden wenn diese mehrmals in deiner Seite genutzt werden sollen.
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Moendel
Beiträge: 34
Registriert: Di 13. Okt 2015, 07:32

Re: Lektion 2 - Template vertikal variabel

Beitrag von Moendel » Mi 10. Feb 2016, 19:30

Hier meine Beispiele:

Beispiel1
Beispiel2

mal gucken, ob es so passt. Danke fürs Schauen
Gruß
Moendel

camouflage1984
Beiträge: 244
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 2 - Template vertikal variabel

Beitrag von camouflage1984 » Fr 12. Feb 2016, 09:20

Hallo Moendel

Das passt soweit, nur im Beispiel 2 passt der rote Hintergrund nicht zur Farbe der Bilder.
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Moendel
Beiträge: 34
Registriert: Di 13. Okt 2015, 07:32

Re: Lektion 2 - Template vertikal variabel

Beitrag von Moendel » Fr 12. Feb 2016, 09:31

..oh, ist mir im Eifer gar nicht aufgefallen ..
die Korrektur stelle ich nun frecherweise nicht mehr hier ein, da ich bereits an Lektion 3 bastel ;)

camouflage1984
Beiträge: 244
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 2 - Template vertikal variabel

Beitrag von camouflage1984 » Fr 12. Feb 2016, 10:09

Hallo Moendel

Das ist schon ok ;)
Viel Spaß bei Lektion 3
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast