Wie Web-Seiten in Spalten zum Design

Da ähnliche Seitendesigns (wie ein Drei-Säulen-Design) mit unterschiedlichen Mengen an Inhalten halten, wenn Sie Web-Seiten entwerfen, müssen Sie planen, wo der zusätzliche Inhalte gehen, wenn es nicht innerhalb der Spalte passt.

Die einfache Antwort: Nach unten. Der Punkt: Scrolling vertikal (Oben und unten) anstelle von horizontal (Seitwärts) in Web-Seiten ist viel intuitiver und funktionell. Auf der negativen: Blättern hin und her und hin und her und hin und her (Sie zum Punkt zu kommen) mit einer horizontalen Bildlaufleiste wirklich den Fluss bricht, wenn die Leute eine Seite zu lesen versuchen.

Mit anderen Worten, können die Leute bewegen viel leichter auf und ab, als sie nach rechts und links bewegen.

Obwohl Zeilen (horizontal Sätze von Inhalts) eine Rolle bei der Gestaltung von Webseiten zu spielen, definieren Spalten-Design. A 960 Rasterseite kann so lang oder kurz sein, wie Sie es haben wollen. Aber eine oder andere Weise, hat Seite Design-Inhalte zu ermöglichen, nach unten zu erweitern.

Die grundlegenden Optionen sind diese:

  • Sie können Spalten ohne definierte Höhe haben, die Inhalte so dass so weit wie nötig zu erweitern unten.

  • Sie können Säulenhöhen definieren, aber dann muss man andere Techniken aufrufen zu ermöglichen, Inhalte nach unten zu erweitern, wie rollbare oder Faltschachteln.

Wenn Sie viele gut gestaltete Web-Seiten überblicken, werden Sie sehen, dass nicht nur sie überwiegend in 960 px Behälter gelegt, aber sie sind alle im Wesentlichen in zwei oder drei Spalten angelegt.

Wirklich? Wenn Sie eine Menge von gut gestalteten Websites überblicken, werden sie nicht erscheinengelegt in zwei oder drei Kolonnen werden. Sie werden sehen, wie sie in 5 Spalten angelegt sind, oder 8 oder 11. Aber wenn Sie ein Lineal oder ein Blatt Papier auf den Bildschirm halten, werden Sie feststellen, dass zugrunde liegende alle Spalten sehen in eine Seite a mehr grundlegende Design.

Werfen Sie einen Blick auf die IMDb (Independent Movie DataBase) Seite. Auf den ersten Blick könnte es scheinen, dass diese Seite wird in fünf oder sogar acht Spalten angelegt (wenn Sie die drei Säulen in der unteren rechten zählen).

bild0.jpg

Aber wenn Sie eine Linie etwa drei Viertel der Seite von der linken Kante verfolgen, können Sie sehen, dass die fünf sichtbaren Spalten zugrunde liegenden (in den meisten der Seite) ist eine grundlegende Zweisäulenstruktur. Das grundlegende Zwei-Säulen-Division wird hier dargestellt:

image1.jpg

Das Essen zum Mitnehmen, ist dies: Wenn Sie Seiten entwerfen, ist es einfach in Spalten teilen - sie in zwei Teile zu teilen, drei, vier, fünf und mehr Spalten. Allerdings ist es technisch einfach Seitenlayout-Elemente zu spalten, aber technisch schwierig zu ermöglichen, Inhalte über zwei definierte Spalten erstrecken. So der Regel aus technischen Gründen ist, dass Spalten in Web-Design sind leicht zu spalten, aber schwer zu verschmelzen.

Also, wenn es darum geht, Zeit für Sie ein Design in eine Web-Seite zu übersetzen, zunächst teilen die Seite in zwei oder drei Spalten und dann weiter die Spalten unterteilen nach Bedarf. Beispielsweise, Die New York Times Website sieht aus wie es in fünf Spalten unterteilt ist.

image2.jpg

Aber wenn Sie die Ansicht verkleinern und einen Blick auf die in der folgenden Abbildung dargestellt Seite nehmen, können Sie sehen, wie unter diesen fünf Säulen sind eigentlich zwei Spalten, von denen jede weiter in andere Spalten manchmal unterteilt ist. Oder, wie im Fall des prominenten Anzeige in der rechten, linken Spalte können Inhalte erweitern eine ganze Spalte zu füllen.

image3.jpg

Es gibt eine Ausnahme von der Regel hier: Die wichtigsten Elemente der Seite sind in einem zweispaltigen Layout, aber der Kopfzeile (mit dem MalMastkorb) und die Fußzeile (nicht sichtbar in den Screenshots) sind einspaltig Elemente, die über die gesamte 960 px strecken; breiten Container, der die Seitenrahmen.

Enthält diese zwei oder drei Spalte Regel gilt nur für Online-Zeitungen? Nein. Die folgende Abbildung zeigt, dass Facebook-Seite in zwei Spalten unterteilt ist, und YouTube ist in drei Spalten angelegt.

image4.jpg

Beachten Sie, dass die mittlere Spalte von YouTube manchmal in der Hälfte, in zwei Spalten aufgeteilt ist. Wie Sie im Web erkunden und Websites, die Sie identifizieren zu schätzen wissen, die Zeit nehmen, zu dekonstruieren, wie sie sich um zwei oder drei Spalten strukturiert sind.

Menü