Seite 1 von 1

Lektion 1 - Template mit Hintergrundbild

Verfasst: Di 19. Aug 2014, 11:31
von Admin
Eine Webseite, die über ein externes Stylesheet gebastelt wurde, kann immer wieder ohne Probleme im Aussehen verändert werden. Alleine durch das neue Positionieren der Bereiche und das Ändern der Größen können ganz neue Webseiten entstehen.

[col]Mit der CSS-Technologie kannst du z.B. ein Foto ohne großen Aufwand in ein Template verwandeln.

Um das Bild als Template nutzen zu können, solltest du darauf achten, dass es 900px in der Breite nicht überschreitet, sodass man die Seite noch auf einem 17" Monitor mit einer Auflösung von 1024px x 768px vollständig sehen kann.Du musst es entsprechend mit einem Bildbearbeitungsprogramm (z.B. Gimp) skalieren.|Die Fläche für den Inhalt grenzt du grafisch ein wenig ab, sodass der Text lesbar bleibt. z.B. so:
#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Je stärker du deine Seite in feste Größen fasst, desto größer ist die Wahrscheinlichkeit, dass das Layout nicht mehr passt, wenn jemand z.B. die Schrift vergrößert ... Probiere also in verschiedenen Browsern die unterschiedlichsten Einstellungen aus.
Im Einsteigerkurs hast du eine Webseite erstellt, die im Prinzip ähnlich war. Du hast die Div
  • #seite, #header, #menu, #inhalt, #footer
Wenn du mit festen Breiten arbeitest, musst du darauf achten, dass deine Div auch alle in dein schickes Bild passen. Da die Browser unterschiedlich die Abstände berechnen, solltest du nach Möglichkeit auf die Abstände verzichten. Wenn du jedoch einen Abstand verwenden möchtest, dann beschränke dich auf eine Art, also entweder Innenabstand, oder Außenabstand.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[anmerk]Bild|Achtung!
Einige Webbrowser addieren die Abstände auf die Breite auf, andere ziehen sie von der Breite automatisch ab.[/anmerk]


Übung

Übungsdateien

ok, viel erklärt, jetzt kommt die Praxis, dann wird dir die Theorie bestimmt verständlicher.

Zu dieser Übung gehört ein Ordner mit 3 vorbereitete Templats und einem Foto, was du selber vorbereiten kannst. - Also 4 Bilder. Natürlich kannst du auch mit deinen eigenen Fotos experimentieren.

Hier sind die Lösungen zu 2 weiteren Templates die ich beigelegt haben:

Lösung Der Weg

Lösung Freiheit

Lösung Gemüse

Lösung Urlaub

Viel Spaß beim Nachbasteln!

Re: Lektion 1 - Template mit Hintergrundbild

Verfasst: Di 2. Sep 2014, 09:32
von kp2709

Re: Lektion 1 - Template mit Hintergrundbild

Verfasst: Di 2. Sep 2014, 10:52
von anke
Oh, da war jemand richtig fleißig :D
Für mich sieht das alles gut aus ;)

weiter gehts

Re: Lektion 1 - Template mit Hintergrundbild

Verfasst: Sa 10. Okt 2015, 08:28
von Hellriders
hi,
nachdem ich bei dem ersten nur Zahlen abgetippt habe, :(
beispiel1

ist das zweite ähnlich aber alles selbst erstellt. :D
test1

gruß micha

Re: Lektion 1 - Template mit Hintergrundbild

Verfasst: Sa 10. Okt 2015, 08:43
von camouflage1984
Hallo Micha

:D Sehr gut...

Re: Lektion 1 - Template mit Hintergrundbild

Verfasst: Di 9. Feb 2016, 16:33
von Moendel
Hallo, da bin ich nun endlich vom Anfängerkurs hierher gewandert.
Ist ja gar nix los hier? :?
Ich mach dann mal langsam weiter:

Beispiel Weg
Beispiel_Winter
Beispiel_Blume
LG
Moendel

Re: Lektion 1 - Template mit Hintergrundbild

Verfasst: Mi 10. Feb 2016, 00:26
von camouflage1984
Hallo Moendel
Moendel hat geschrieben:Ist ja gar nix los hier?
Ja leider....

Alles gut bei deinen Arbeiten, weiter geht`s.