Kann man bestimmen, wie viele Spalten ein Webdesign-Raster hat?

Also mache ich diese lynda.com HTML/CSS-Aufgabe und sie fordert mich auf, mein bevorzugtes Webdesign zu nehmen, zu bestimmen, wie viele Spalten das Raster hat, und dann zu versuchen, die Layoutstruktur selbst neu zu erstellen.

Nehmen wir also an, ich nehme mein Lieblingsdesign aus dem Internet wie dieses. Es sieht so aus, als hätte das Design ein 4-Spalten-Raster, aber dann sehe ich, dass die erste Spalte breiter ist als die anderen, und ich bin verwirrt. Ich kann nicht einmal verstehen, wie breit das Modell tatsächlich ist, ist es wie üblich 960 Pixel oder breiter?

Geben Sie hier die Bildbeschreibung ein

Aber im Videobeispiel nimmt der Ausbilder ein altes lynda.com-Design und bestimmt irgendwie sehr einfach das Rasterlayout, obwohl es komplizierter aussieht.

Geben Sie hier die Bildbeschreibung ein

Wie kann ich das lernen? Ist es wirklich so schwer zu sehen, wie viele Spalten ein Raster hat?

Antworten (1)

Hier gibt es einige Probleme.

  1. Nicht jeder verwendet ein Grid-System und selbst wenn, gibt es keine Garantie dafür, dass die Grids konsistent sind. Vielleicht verwendet Ihr Beispiel ein vierspaltiges Raster mit einer breiteren linken Spalte.

  2. Raster sind ein Werkzeug. Eine Richtlinie. Sie bedeuten nicht unbedingt, dass Sie zu 100 % an Ihr Raster gebunden sind. Wenn Leute mit einem vorgefertigten Framework entwerfen, das ein festes Rastersystem verwendet, halten sie sich oft an die ihnen zur Verfügung stehenden Raster – aber das ist nicht garantiert. Ich mache meine eigenen Gittersysteme und breche oft aus diesen Gittern aus.

  3. Wenn das Design ursprünglich in Photoshop oder ähnlichem mit einem Raster erstellt, aber ohne die Verwendung eines Frameworks oder expliziten CSS-Rastersystems codiert wurde, ist es möglicherweise unmöglich zu erkennen, welches Rastersystem verwendet wurde, ohne die Photoshop-Datei zu sehen.

Das gebräuchlichste Rastersystem, das im Web verwendet wird (so wie ich es gesehen habe), ist wahrscheinlich ein 12-Spalten-Raster, vielleicht gefolgt von 16 Spalten. Obwohl es also wie 4 Spalten aussehen mag, basiert es eher auf einer größeren Anzahl von Spalten – jede Spalte besteht aus einer Reihe kleinerer Spalten. Angenommen, 10 Spalten werden in 4 Spalten als 4-2-2-2 unterteilt.

Es ist schwer zu sehen, wie das Raster verwendet wird – das kommt mit der Übung. Je mehr Sie Raster verwenden und je öfter Sie sehen, dass Raster verwendet werden, desto mehr werden Sie sie erkennen.

Es war nicht einfach, in Ihrem Beispielbild ein solides Rastersystem zu sehen, also habe ich einen kurzen Blick darauf geworfen, und es scheint, dass die kleinste Anzahl von Spalten, die ich passend machen konnte, 21 war – mit Dachrinnen, die breiter als die tatsächlichen Spalten sind! * Es ist auch erwähnenswert, dass es 1200 Pixel breit ist und nicht 960 Pixel – was Sie leicht genug sehen können, wenn Sie es in einem Bildbearbeitungsprogramm öffnen.

Geben Sie hier die Bildbeschreibung ein

* Kurzer Tipp: Ich habe dies getan, indem ich das Bild in Illustrator geöffnet, ein halbtransparentes Rechteck über den Inhaltsbereich gezogen und die Funktion „In Raster teilen“ verwendet und die Anzahl der Spalten geändert habe, bis sie passen.

Kann man bestimmen, wie viele Spalten ein Webdesign-Raster hat?
AntwortenHierDatenschutz-Bestimmungen1y, 1v