Lektion 3 - Dynamisches Template mit Grafiken

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

Lektion 3 - Dynamisches Template mit Grafiken

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

Um ein - nach allen Seiten dynamisches Template zu erstellen, kommen wir in diesem Kurs zum -

absoluten Positio­nieren

Diese Form benötigt ein bisschen mehr Aufmerksamkeit als die bisherige Technik. Mehr nicht, weil es schwierig wäre, absolut zu positionieren, sondern weil dies die CSS-Technik ist, mit der der Internet Explorer von Microsoft am wenigsten vertraut ist. Du musst die Bedürfnisse die­ses Browsers immer im Auge behalten, wenn du diese Technik anwenden möchtest. Der Firefox guckt über so manchen Fehler hinweg, der Internet Explorer will aber immer alles genau wissen. - Das hast du bestimmt auch schon in den vorangegangenen Lektionen bemerkt.

Die absolute Positionierung unterscheidet sich entscheidend von dem, was du bislang gelernt hast.

Ein absolut positioniertes Element (DIV, Liste, Überschrift ...) liegt absolut unabhängig vom Textfluss auf deiner Seite. Abstände zu den Seiten des Browserfensters formatierst du über die Boxeigenschaft "Offset".

Durch die absolute Positionierung wird ein Element aus dem Textfluss gelöst ist. Du kannst so mehrere Elemente übereinander legen. Sie werden zu "Layern" - also Ebenen.

Die Anordnung der Ebenen steuerst du in den Boxeigenschaften über den z-index. Der z-index "0" ist die unterste der Ebenen. Allen Ebenen, die du darüber legen willst, musst du einen z-index zuweisen von 1 aufsteigend.

[col]Probiere es einmal aus:

Öffne KompoZer und speichere die Seite als absolut1.html in einem neuen Ordner.

Für diese kleine Übung benötigst du 4 DIVs. Du musst also die Zeilenschaltung erst 4-mal betätigen. Spring mit dem Cursor wieder in die erste Zeile und erstelle die DIVs:
  • Block1
  • Block2
  • Block3
  • Block4
Lege nun das Stylesheet an:
  • body =>Textfarbe: Orange, Textgröße 2em
    #block1 => Hintergrundfarbe: gelb
    #block2 => Hintergrundfarbe: rot
    #block3 => Hintergrundfarbe: grün
    #block4 => Hintergrundfarbe: blau
Weise die IDs den entsprechenden Blöcken zu.

Da alle DIVs die gleiche Größe und Positionierung haben sollen, lege noch eine globale Style-Regel an:

div => Höhe: 200px, Breite 200px, Position: absolut|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Alle deine DIVs liegen nun übereinander oben in der linken Ecke. Sie haben sich in der ursprünglichen Reihenfolge übereinandergelegt. Ganz unten liegt der Block1 - ganz oben liegt der Block 4.

Verändere nun die Position der einzelnen Blöcke, sodass alle DIVs sichtbar werden. Dies geschieht in den Boxeinstellungen "Offset".

Positioniere deine Blöcke neu:
  • #block1 => Offset oben und links: 0px
    #block2 => Offset oben und links: 50px
    #block3 => Offset oben und links 100px
    #block4 => Offset oben und links 150px
Die Blöcke liegen immer noch übereinander, jedoch kannst du nun auch die Reihenfolge erkennen, in der sie angeordnet sind:|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]


[col]Sie werden automatisch in der Reihenfolge angeordnet, die sie zuvor im Textfluss hatte.

Dies entspricht dem z-index von
  • #block1 => z-index : 0
    #block2 => z-index : 1
    #block3 => z-index : 2
    #block4 => z-index : 3
|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Um diese Form der Anordnung zu ändern, legst du eine andere Reihenfolge an.

Kehre z. B. die Anordnung um:
  • #block1 => z-index : 3
    #block2 => z-index : 2
    #block3 => z-index : 1
    #block4 => z-index : 0
Auch lassen sich alle Elemente unabhängig voneinander an verschiedenen Punkten auf deiner Webseite positionieren:

z.B.
  • #block1 => Offset oben und links: 0px
    #block2 => Offset oben 0px, links: 300px
    #block3 => Offset oben 300px, links 300px
    #block4 => Offset oben 300px, links 0px
|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Wie du erkennen kannst, wird ein kleines Kreuz am oberen linken Rand des absoluten Elementes angezeigt. An diesem Kreuz lässt sich das Element mit der Maus greifen und verschieben. Den Anfasser solltest du ignorieren, da die neue Position nicht in das Stylesheet, sondern in den HTML-Text geschrieben wird. Solltest du versehentlich doch das Element mit der Maus verschoben haben, entfernst du die Positionsangaben wieder aus dem Inline-Style:

Klicke mit rechter Maustaste auf das verschobene Element und wähle "Inline-Styles" aus der Liste. Im Assistenten aktivierst du das Register "Allgemein". Dort wird die Formatierung angezeigt, die in den HTML-Code geschrieben wurde.

Lösche die Formatierung in diesem Fenster.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]



[anmerk]Bild|Achtung ! Stolperfalle 1
Für den Internet Explorer musst du hier darauf achten, dass du die Positionierung grundsätzlich im Offset einstellst. Der Firefox zeigt die Einstellungen auch dann korrekt an, wenn du die Positionierung im Außenabstand einfügst.[/anmerk]

Absolut und Relativ Positioniert

Ein absolut positioniertes Element lässt sich kreuz und quer über den Bildschirm verschieben. Grundlage für die Positionierung ist immer der Bildschirmrand, unabhängig davon, wo genau der DIV eingefügt wurde.

[col]Bei verschachtelten Elementen kannst du die Grundlage für das Element, das in einem anderen Element liegt, ändern.

Beispiel:

Lege einen DIV an Block1. Lege innerhalb des DIV einen weiteren DIV an Block2. Für die bessere Übersichtlichkeit solltest du jedem DIV eine Hintergrundfarbe zuweisen.
Positioniere nun die DIVs:

#block1 => Höhe: 300px, Breite: 300px, Außenabstand oben und links je 150px.
#block2 => Höhe: 50px, Breite: 100px, Position: absolut, Offset: oben und links 0px.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Der absolut positionierte Block 2 positioniert sich in der oberen linken Ecke. Grundlage hierfür ist die Abmessung der Browseranzeige.

Der Block 1 positioniert sich je 150px vom oberen und linken Rand entfernt.

Stellst du nun die Position des Blocks 1 auf relativ ein, hüpft Block 2 in die obere linke Ecke des Blocks 1.
Das heißt, Block 2 orientiert sich nun an den Abmessungen seines Elternelementes - Block 1.
Dieses Verhalten kannst du dir zunutze machen, wenn du ein dynamisches Template erstellen willst.

Ich habe da mal etwas vorbereitet ...|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]



Übung

Übungsdateien

[col]Das Template, das ich vorbereitet, habe ist nicht besonders spektakulär, aber es ist nicht so ganz einfach eine Webseite zu erstellen, die horizontal und vertikal mitwächst, jedoch runde Ecken hat und eine Schattierung rund um das gesamte Layout.

Also wie auch in der letzten Lektion muss das Template erst einmal zugeschnitten - gesliced - werden.

Die Hilfslinien werden diesmal an den Ecken orientiert.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]


[col]Nachdem du es zerschnitten hast, werden dir 9 Teilstücke angezeigt. Das mittlere Stück benötigen wir nicht, da es einfarbig ist und ganz einfach durch Farbe ersetzt werden kann.

Du brauchst die Ecken oben und unten links und rechts, sowie die Kanten links, rechts, oben, unten.

Beim Zuschneiden sind die Kantenstücke sehr lang geworden. Die kannst du noch einmal zuschneiden. Es reicht ein 1px breites Stück. Um die Stücke noch einmal zu zeigen, habe ich die Seitenlängen etwas breiter gelassen, damit man noch erkennen kann, was es ist. Besser ist immer beim Speichern als Speichernamen die Position des Stückes zu verwenden. Denke dran: immer ohne Umlaute, Sonderzeichen und Großschreibung.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]


Lege eine neue Ordnerstruktur an mit einem Ordner für deine Hintergrundgrafiken.

Öffne eine neue Seite mit KompoZer und speichere Sie als template1.html in deine Ordnerstruktur.

Lege nun die Divs an:
  • Seite
  • Kopf
  • Kopf-links
  • Kopf-rechts
  • Menü
  • Inhalt
  • Footer
  • Footer - links
  • Footer - rechts
Die Div Kopf-links und Kopf-rechts legst du im Kopf-Div an.
Die Div Footer-links und Footer-rechts legst du im Footer an.
Ok, die Ausgangsstruktur haben wir. Lege nun die IDs für deine Div fest.

#kopf
  • Positionierst du relativ, sodass du die beiden Div Kopf links und rechts am Kopf ausrichten kannst. Als Hintergrundgrafik fügst du die Grafik - oben.png ein. Sie soll sich nur horizontal wiederholen. Die Höhe des Kopfes stellst du anhand der Größe der Grafik ein.
#kopf-links, #kopf-rechts
  • Positionierst du absolute und richtest sie per Offset in die beiden Ecken des Kopfes aus. Sie bekommen die Größe der Kopfecken. z-index 1, und die entsprechenden Hintergrundgrafiken
#footer
  • Den footer positionierst du relativ, sodass sich die beiden div footer-links und footer-rechts darin ausrichten lassen. Fülle den Hintergrund mit der Grafik unten.png. Sie soll sich horizontal wiederholen. Die Höhe des Footers stellst du anhand der Höhe dieser Grafik ein.
#footer-links, #footer-rechts
  • Positionierst du ebenfalls absolut und richtest sie per Offset in die Ecken des Footers aus. Stelle ihre Größe an den Hintergrundgrafiken der Ecken unten-links und unten-rechts ein. z-index 1
#menu
  • Das Menü wird wieder links gepuffert, sodass der Inhalt nach rechts hüpft. Stelle die Breite auf 150px ein.
    #
    Klicke auf das Bild für die Darstellung in Originalgröße
#seite
  • in der ID seite stellst du die hintergrundgrafik-links.png ein. Sie wird nur vertikal wiederholt. Stelle die Breite auf 80% Außenabstand - links und rechts auf auto, um die Seite auf den Hintergrund zu zentrieren.
#inhalt
  • In der ID inhalt stellst du die Hintergrundgrafik rechts.png ein. Sie wird ebenfalls nur vertikal wiederholt und rechts ausgerichtet.
[col]Um das Loch in der Mitte weg zu bekommen, stellst du im #seite die Hintergrundfarbe auf #f6f6f6.

Jetzt kannst du den Inhalt mit Beispieltext füllen und die Menüleiste mit einem Menü auffüllen. Stelle den Innenabstand vom Inhalt so ein, dass der Text nicht mehr über den Rand läuft.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Ein Problem gibt es jedoch noch zu lösen. Die Bezeichnungen in den Ecken sind noch sichtbar. Auch hierfür gibt es einen Trick:

Markiere die Bezeichnung kopf-links und markiere über Menü Format - Schriftschnitt - Feste Breite. Es wird ein <span></span> um den Text gelegt. Auch stellt sich gleich ein Inlinestyle ein, den du sofort entfernen solltest. Wiederhole diesen Vorgang in allen vier Eck-Div. Erstelle eine neue Styleregel span. Über die Boxeigenschaften stellst du nun die Anzeige auf keine ein.

Alle Texte sollten nun verschwunden sein. Um zu prüfen, ob das Layout auch dynamisch ist, füge so viel Text ein, wie du magst, vergrößere und verkleinere das Browserfenster, um zu schauen, ob es dynamisch ist.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]


Lösung Beispiel1

Weil das Basteln so viel Spaß gemacht hat, kannst du dich ja noch an dem zweiten Template versuchen, was ich dir als Beispiel2 beigefügt habe.

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

Re: Lektion 3 - Dynamisches Template mit Grafiken

Beitrag von kp2709 » Mi 3. Sep 2014, 16:26

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 3 - Dynamisches Template mit Grafiken

Beitrag von anke » Mi 3. Sep 2014, 16:54

Super Kurs :D

Weiter gehts ;)

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

Re: Lektion 3 - Dynamisches Template mit Grafiken

Beitrag von Hellriders » Fr 16. Okt 2015, 18:38

Hi,

hier nun mein Ergebnis template1 :)

gruß micha

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

Re: Lektion 3 - Dynamisches Template mit Grafiken

Beitrag von anke » Sa 17. Okt 2015, 12:41

Hallo micha

da hast du aber wenig Platz links für deine Navi gelassen.

Gruß Anke

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

Re: Lektion 3 - Dynamisches Template mit Grafiken

Beitrag von Moendel » Fr 12. Feb 2016, 18:25

Habe mich durchgearbeitet.
Beispiel1
Beispiel2

Wäre es denn sinnvoll, grundsätzlich mit dynamischen Templates zu arbeiten?
Scheint ja Vorteile zu haben.
Ich muss allerdings sagen, positionieren ist für mich absolut kein Kinderspiel.
Irgendwie habe ich den Dreh noch nicht so richtig raus.Ganz schön friemelig. :?

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

Re: Lektion 3 - Dynamisches Template mit Grafiken

Beitrag von anke » Fr 12. Feb 2016, 19:16

Hallo Moendel
das Positionieren ist auch nicht so ganz einfach. Eigentlich ist es aber nur eine Übungssache.

Feste Breiten sind einfacher zum Handhaben, wenn man anfängt Webseiten zu basteln. Dynamische Webseiten sind im heutigen Smart-Phone-Zeitalter jedoch besser in der Darstellung als feste Breiten. Deine Übungen sind übrigens super geworden ;)

Gruß Anke

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

Re: Lektion 3 - Dynamisches Template mit Grafiken

Beitrag von Moendel » Fr 12. Feb 2016, 20:54

Hallo Anke,
danke, das hilft mir für das Verständnis.
Übrigens bin ich am 2. Beispiel verzweifelt, weil ich in der Mitte eine weisse Fläche hatte,
bis ich endlich bemerkte, dass ich den #body gar nicht zugewiesen hatte :shock:
Soviel zur Übung - da brauche ich wohl noch reichlich.
Dann geh ich mal gucken,was Lektion 4 so für Verwicklungen bietet.
Aber erstmal Wochenende ;)

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

Re: Lektion 3 - Dynamisches Template mit Grafiken

Beitrag von anke » Sa 13. Feb 2016, 09:25

Hallo Moendel
du brauchst body auch nicht zuweisen, weil das automatisch generiert wird. Bitte mache daraus keine Id. Entferne die #body wieder aus dem div und ändere anschließend im Stylesheet #body einfach zu body.

Gruß Anke

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

Re: Lektion 3 - Dynamisches Template mit Grafiken

Beitrag von Moendel » Sa 13. Feb 2016, 14:39

...du brauchst body auch nicht zuweisen, weil das automatisch generiert wird....
Stimmt allerdings und funktioniert .
Beispiel2_korrigiert

Antworten