Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Galerie der Beispielseite hinzufügen

Testen Sie unsere 1893 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dieses Video erläutert die notwendigen Schritte, um die Beispiel-Website um eine Galerie zu erweitern und darin die unterschiedlichen Varianten zu testen. So gelingt es, das Bild optimal in den Fließtext einzubinden.

Transkript

Probieren Sie einfach einmal die Beispielsite, die Sie hier im Browser sehen, um die Galerieseite zu erweitern. Sie haben die Startseite mit dem Heißluftballon, das Kontaktformular auf der Kontaktseite und die 2 Landschaftsbilder auf der Galerieseite, wobei hier die gezeigten Clearing-Techniken zum Einsatz kommen. Probieren Sie es einfach einmal diese Galerieseite einzubauen und Beispielsite um diese Seite zu erweitern, denn Übung macht ja bekanntlich den Meister. Ich möchte Ihnen kurz im folgenden zeigen welche Schritte dazu nötig sind, aber der Lerneffekt ist größer, wenn Sie es einfach erstmal probieren und dann im folgenden schauen was da genau gemacht werden muss. Also Pause Taste drücken, ausprobieren und dann weiterschauen. Die Galerieseite können Sie erstellen als Kopie der Indexseite, der Startseite, auf allen 3 Webseiten müssen Sie die Navigation ändern, also hier auf der Startseite kommt der Listenpunkt mit der Galerie dazu, auf der Kontaktseite ebenfalls, auf der Galerieseite selbst müssen die Links auch ergänzt werden und die Galerieseite bekommt die Klasse sie-sind-hier, damit wenn man auf der Galerieseite ist, oben dieser Menüpunkt weiß hervorgehoben wird. Das sind die Änderungen im HTML, auf der Galerieseite selbst muss oben der Titel geändert werden, der Rest bleibt, das kann alles gleich bleiben, in die Navigation muss man anpassen und natürlich im Inhaltsbereich löscht man den Inhalt von der Startseite raus und fügt hier die beiden Bilder mit dem Text ein. Die Galerie divs bekommen hier die Klasse cf, das bezieht sich auf den Clearfix-Hack, den habe ich deponiert in dem Stylesheet fundament.css, weil man den auch auf anderen Seiten und in anderen Zusammenhängen eventuell noch gut gebrauchen kann. Dort im Teil 4 für allgemeine Klassen habe ich den Micro-Clearfix-Hack hinterlegt und in bildschirm.css in einem dritten Teil mit dem Namen Sonstige Styles, dort sind die beiden Styles zur Gestaltung der Galerie hinterlegt. Neu dabei ist hier der sogenannte box-shadow, der Schatten für die Bilder, den Sie hier im Einsatz sehen. Wenn ich das Bild markiere, dann sieht man hier bei den Regeln den box-shadow, achten Sie oben auf das Bild oder auf die Bilder, dann können Sie durch ein-und ausschalten, den Schatten im Einsatz sehen. Gebaut wird so ein Schatten mit verschiedenen Werten 0px, 2px, 6px rgba (0, 0, 0, 0. 3). Fangen wir hinten an: rgba: rot, grün, blau und a steht für Alphakanal, das heißt, 0 rot, 0 grün, 0 blau, das ergibt schwarz und das Ganze wird ein bisschen durchsichtig gestaltet durch dieses 0,3 hier. Das ergibt im Endeffekt hier, wenn ich den Schatten wieder sichtbar mache einen richtigen schönen Schatteneindruck, wenn man hier das auf 1,0 ändert oder auf 1, dann sieht man, dann ist das ein eher schwarzer Schatten und 0.3 das gibt dann ein durchsichtigeren Schatten. Die ersten Werte von box-shadow hier im Überblick: die 0px, das ist die Verschiebung auf der X-Achse, also nach rechts und links wird gar nichts genommen, der zweite Wert ist die Verschiebung des Schattens auf der Y-Achse, also offset y nennt sich das dann im Fachjargon, von oben nach unten und 6px, das ist der blur radius das ist der Grad der Verschwommenheit. Im Entwicklertool der Browser kann man damit einfach ein bisschen rumspielen und dann begreift man sehr schnell wofür die Werte da sind. Wenn ich hier 0 auf 10 setze, dann sehen Sie X das ist von links nach rechts. -10px geht in die andere Richtung. 0 hat keinen Versatz. Das gleiche mit 12px, hier der einfachheithalber -12px geht nach oben 12 geht nach unten das ist die Y-Achse, 60 Grad Verschwommenheit, dann sieht man rundherum hier, 60px Verschwommenheit, das ist ein bisschen viel und die Farbwerte, Ausgangsbasis schwarz, ist für ein Schatten gut und 0,3 heißt, dass das relativ transparent ist. Zusätzlich so ein Schatten zusammen und zum Abschluss hier noch einen kleinen Blick auf eine Referenz. Sie sehen hier wiki.selftml.org, das ist Work and Progress, wie man das so schön nennt, das wird ständig weiterentwickelt und hier sehen Sie die Seite zum box-shadow mit einigen Beispielen. Hier kann man sich das ansehen, hier sind verschiedene deutliche Schatten Und man kann hier frickln, wie es so schön heißt, man kann hier direkt basteln und mit diesen Schatten spielen, so ähnlich wie Sie das eben im Entwicklertool des Browsers gesehen haben. Damit begreift man dann sehr schnell wie das mit dem Schatten funktioniert. Internet Explorer kennt das ab Version 9, Internet Explorer 8 wird das schlicht und einfach ignorieren, also keinen Schatten darstellen, hat aber ansonsten auch keine Nebenwirkungen.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!