Grundlagen der Webprogrammierung: Meine erste Website

Ein Blick auf die Details

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Schritt sollten Sie Ihren Fokus auf die Details richten und kleine Problemzonen bereinigen. Auch kleine Änderungen können noch viel bewirken!
06:59

Transkript

Nun ist es an der Zeit, dass wir uns ein bisschen um Details kümmern. Was mir zum Beispiel jetzt überhaupt nicht mehr zusagt, ist diese dunkelgrüne Farbgebung, die wir bei unseren Textelementen haben. Und da werde ich ganz gerne austauschen und gegen eine Farbe aus unserem Foto wechseln. Dazu habe ich hier meine Adobe Colour CC Farbpalette, wo ich hier mit diesem Symbol mir eins meiner Bilder holen kann und natürlich hole ich mir mein Wegbild und öffne es. Ich bekomme hier einige Vorschläge angezeigt, möchte aber jetzt lieber in die dunkleren Bereiche wechseln und mit diesen Vorgaben kann ich jetzt zurück zum Farbrad gehen und mir gegebenenfalls diese einzelnen Werte holen und anzeigen lassen. Ich möchte mal mit diesem Blauton anfangen und möchte mir als Erstes diesen Blauton kopieren. Ich werde mir jetzt den nächsten Dezimalwert kopieren, der in CSS und HTML sehr gut darstellbar ist. Mit Steuerung+C kopiere ich mir jetzt also diesen Wert, wechsele zurück in meine Bergwelt, mache ihn jetzt hier etwas kleiner und werde nun hier statt den Werten für darkgreen versuchen, meinen nächsten Dezimalwert einzusetzen. Damit klar ist, dass es sich um den nächsten Dezimalwert handelt, brauche ich das Rautensymbol und den Zahlenwert. Das mache ich auch beim Rand, Raute und den Zahlenwert. Dann werde ich hier mal auf "Steuerung+S" speichern, klicken und hier dann auf eine neuladende Seite und ja dieser Blauwert ist schon angenehmer, als dieses seltsame Grün von Tobias. Ich könnte aber auch irgendeinen der anderen Werte nehmen. Was ich jetzt noch machen möchte, ist diesen Blauwert auch für meine Navigationsleiste zu verwenden. Da habe ich im Moment ja noch black, aber zum Vereinheitlichen, werde ich da auch noch diesen Blauwert nehmen. Und in einem zweiten Schritt möchte ich jetzt dafür sorgen, dass es etwas mehr Luft für meine Artikel gibt und das kann ich, indem ich den Artikeln ein Padding zuweise. Ich sage also, dass ich für meine Article etwas speziellere Werte haben möchte, nämlich ein Padding und ich beginne mal mit "1em". Das sollte mir schon zu etwas Luft verhelfen, ich speichere wieder, und habe jetzt meine einzelnen Abschnitte mit etwas mehr Luft. Mir ist beim Betrachten noch etwas aufgefallen und zwar, habe ich ein kleines Darstellungsproblem mit dem Hintergrundbild. Da wo ich genügend Textinhalt habe, habe ich gar kein Problem mit der Darstellung des Bildes. Allerdings an Orten, wo wenig Text ist, wie zum Beispiel hier bei "Über uns", habe ich mit dem "Background Size Cover" das Problem, dass ich jetzt leere Flächen und leere Stellen habe. Das heißt ab dem Moment, wo ich weiß, dass mir das passiert, weil ich einfach weniger Text habe, und dieses Problem tritt übrigens nur dann auf, wenn das Seitenverhältnis nicht stimmt. Ab dem Moment, wo ich die Seite wirklich mit der vollen Breite mir anzeigen lassen kann, habe ich dieses Problem nicht. Aber ich kann natürlich nicht ausschließen, dass Menschen sich meine Webseite auch auf einem Smartphone oder auf einem Tablet hochkant anschauen wollen. Und dann wäre dieser Leerraum sehr unschön. Falls ich in dieses Problem reinrutsche, muss ich überlegen, ob ich nicht "Background Size Cover" wieder weggebe. Was dann passiert, ist, dass ich zwar immer bestimmte Teile meines Bildes angezeigt bekomme, aber nur unter ganz speziellen Voraussetzungen, nämlich wenn der Text besonders lang ist, wie hier bei den Ausflügen bekomme ich auch den unteren Teil zu sehen. Ich habe nach wie vor "background-position center", was normalerweise dafür sorgen sollte, dass ich eben in der Mitte meiner Darstellung dann tatsächlich auch die Mitte meines Bildes angezeigt bekomme. Was ich hier, wenn ich meinen Bildschirm wieder vergrößere, auch tatsächlich sehen kann. So müssen Sie beim Erstellen natürlich auch solche Details achten. Hier haben wir jetzt noch eine kleine spannende Ungereimtheit, nämlich die, dass hier oben beim Ausflüge-Text einen Paragraphen habe, dieser aber zu keinem Artikel dazu gehört und aufgrund dessen auch nicht mit in Betracht gezogen wird. Auch dafür gibt es eine Lösung, und zwar kann ich jetzt dem entsprechenden Bereich bei Ausflügen, das heißt ich muss die Ausflugseite öffnen, also diesem Paragraphen hier kann ich jetzt eine Klasse mitgeben, die ich dann gleich behandele, wie zum Beispiel "Article". Hier nenne ich die Klasse am besten, und speichere das in meinem HTML und muss dann nur noch in meiner CSS zusätzlich zum article.raum für die Klasse "Raum" verwenden. Wenn ich dies jetzt speichere und meine Seite neu lade, dann habe ich jetzt auch für diesen vereinsamten Paragraphen mein Padding. Wenn es um Details geht innerhalb des Designs, dann ist ein Weg der, dass Sie sich alle Seiten mal anschauen und überlegen, ob die Darstellung jetzt dem entspricht, was Sie sich vorstellen und ob das dann auch für alle Seiten zutrifft. Und dann können Sie mit dem Feintuning beginnen. Das betrifft einerseits eben optische Darstellungen oder Farbgestaltungen und auf der anderen Seite auch Raumschaffendes, beziehungsweise bestimmte Abstände, die Sie dann einbauen, um etwas mehr Luft zu bekommen.

Grundlagen der Webprogrammierung: Meine erste Website

Gestalten Sie in wenigen Stunden Ihre erste Website und lassen Sie sich dabei von der Idee über die Auswahl der Werkzeuge bis zur Veröffentlichung Ihrer Web-Präsenz begleiten.

2 Std. 53 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:09.05.2017

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!