Comment concevoir des pages Web dans les colonnes

Parce que la conception des pages similaires (comme une conception à trois colonnes) détiennent des quantités différentes de contenu, lorsque vous concevez des pages Web, vous devez planifier pour le cas où le contenu supplémentaire ira si elle ne rentre pas dans la colonne.

La réponse est simple: le bas. Le point: le défilement verticalement (haut et bas) au lieu de horizontalement (sur le côté) dans les pages web est beaucoup plus intuitive et fonctionnelle. Sur la négative: défilement avant et en arrière, et d'avant en arrière et d'avant en arrière (vous obtenez le point) avec une barre de défilement horizontale brise vraiment le flux quand les gens essaient de lire une page.

En d'autres termes, les gens peuvent plus facilement faire défiler que ce qu'ils peuvent faire défiler vers la droite et à gauche.

Bien rangées horizontales (ensembles de contenu) jouent un rôle dans la conception de page Web, colonnes définissent la conception de la page. Une page 960 de la grille peut être aussi long ou court que vous voulez qu'il soit. Mais d'une manière ou d'une autre, la conception de la page doit permettre d'élargir le contenu vers le bas.

Les options de base sont les suivants:

• Vous pouvez avoir des colonnes sans hauteur définie, permettant d'élargir le contenu aussi loin que nécessaire.

• 
  
  
  
  

  Vous pouvez définir des hauteurs de colonnes, mais alors vous devez invoquer d'autres techniques pour permettre d'élargir le contenu vers le bas, comme des boîtes de défilement ou repliables.

Si vous Enquête de nombreuses pages web bien conçus, vous verrez que non seulement ils sont majoritairement disposés dans 960 px conteneurs, mais ils sont tous essentiellement disposés en deux ou trois colonnes.

Vraiment? Lorsque vous Enquête beaucoup de sites bien conçus, ils ne seront pas apparaître faire déposer en deux ou trois colonnes. Ils me regardent comme ils sont disposés en colonnes, 5 ou 8 ou 11. Mais si vous détenez une règle ou une feuille de papier à l'écran, vous verrez que sous-tendent toutes les colonnes d'une page est un conception plus fondamentale.

Jetez un oeil à la (Movie Database indépendant) la page IMDb. À première vue, il pourrait sembler que cette page est aménagé dans cinq ou même huit colonnes (si vous comptez les trois colonnes dans le bas à droite).

Mais si vous tracez une ligne environ les trois quarts de la page à partir du bord gauche, vous pouvez voir que sous-tendent les cinq colonnes visibles (en plus de la page) est une structure de base plus deux colonnes. Cette division de base à deux colonnes est illustrée ici:

La livraison est ceci: Lorsque vous concevez des pages, il est facile de diviser colonnes - de les diviser en deux, trois, quatre, cinq, et plusieurs colonnes. Cependant, il est techniquement facile de diviser les éléments de mise en page, mais techniquement difficile de permettre au contenu d'étendre sur deux colonnes définies. Donc la règle pour des raisons techniques, est que les colonnes dans la conception web sont faciles à diviser, mais difficile à fusionner.

Alors, quand vient le temps pour vous de traduire une conception dans une page web, diviser d'abord la page en deux ou trois colonnes, puis subdiviser ces colonnes que nécessaire. Par example, Le New York Times site ressemble il est divisé en cinq colonnes.

Mais lorsque vous effectuez un zoom arrière et de jeter un oeil à la page présentée dans la figure suivante, vous pouvez voir comment sous ces cinq colonnes sont en fait deux colonnes, dont chacun est subdivisé en plusieurs colonnes à la fois. Ou, comme dans le cas de l'importante annonce dans le droit; la colonne de gauche, le contenu peut dilater pour remplir une colonne entière.

Il ya une exception à la règle ici: Les principaux éléments de la page sont dans une disposition en deux colonnes, mais l'en-tête (avec le Fois tête de mât) et le pied de page (non visible dans les captures d'écran) sont des éléments-colonnes simples qui étendent à travers l'ensemble du 960 px; récipient large qui encadre la page.

Est-ce que deux ou trois règle de la colonne appliquent uniquement aux journaux en ligne? N La figure suivante montre que le site de Facebook est divisée en deux colonnes, et YouTube est aménagé en trois colonnes.

Notez que la colonne du milieu de YouTube est parfois divisé en deux, en deux colonnes. Alors que vous explorez le Web et identifier les sites que vous appréciez, prenez le temps de déconstruire la façon dont ils sont structurés autour de deux ou trois colonnes.