Lektion 1 - Template mit Hintergrundbild

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

Lektion 1 - Template mit Hintergrundbild

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

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!


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

Re: Lektion 1 - Template mit Hintergrundbild

Beitrag von anke » Di 2. Sep 2014, 10:52

Oh, da war jemand richtig fleißig :D
Für mich sieht das alles gut aus ;)

weiter gehts

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

Re: Lektion 1 - Template mit Hintergrundbild

Beitrag von Hellriders » Sa 10. Okt 2015, 08:28

hi,
nachdem ich bei dem ersten nur Zahlen abgetippt habe, :(
beispiel1

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

gruß micha

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

Re: Lektion 1 - Template mit Hintergrundbild

Beitrag von camouflage1984 » Sa 10. Okt 2015, 08:43

Hallo Micha

:D Sehr gut...
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 1 - Template mit Hintergrundbild

Beitrag von Moendel » Di 9. Feb 2016, 16:33

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

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

Re: Lektion 1 - Template mit Hintergrundbild

Beitrag von camouflage1984 » Mi 10. Feb 2016, 00:26

Hallo Moendel
Moendel hat geschrieben:Ist ja gar nix los hier?
Ja leider....

Alles gut bei deinen Arbeiten, weiter geht`s.
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