This page has been robot translated, sorry for typos if any. Original content here.

Mise en page de site CSS: mise en page en trois colonnes

Notre mise en page

Tâche

Notre tâche est de créer une mise en page en trois colonnes en utilisant CSS. Cette mise en page peut servir de base à un site d’information doté d’un «en-tête», la colonne de droite représentant le menu ainsi que des informations supplémentaires, le bloc de texte central constituant également le «sous-sol» des droits d’auteur, des contacts, etc. Disposition de projet de contenu typique.

Sans aucun doute, cette mise en page ne peut pas être qualifiée de miracle d'une conception, mais vous pouvez toujours apporter ce modèle au «look divin», en choisissant les bonnes polices, leur taille et en ajoutant un magnifique logo. Il ne sera pas difficile de compliquer indépendamment la mise en page, ajouter de nouveaux blocs CSS.

Mise en page du site en trois colonnes complètement sur CSS

Technologies utilisées et support par navigateur

La mise en page du site sera entièrement mise en œuvre en CSS, il est prévu d'utiliser "sporadiquement" l'utilisation de XHTML et de JavaScript.

La mise en page CSS utilisée est prise en charge par Internet Explorer 6, les versions actuelles de Mozilla sont également Opera. Le tracé de certains réglages, la mise en page fonctionnera également dans Internet Explorer 5. Cela devrait suffire. De même, notre CSS est obligé d’aimer les navigateurs de texte avec d’autres appareils exotiques.

La performance du code dans IE 4, Netscape 4 n’a pas non plus été testée dans les navigateurs plus anciens, mais je suis sûr qu’il y aura des problèmes. Cependant, cela n’est pas critique, regardez les statistiques de popularité des navigateurs de hotlog, spylog et liveintenet.

Les avantages et inconvénients de la méthode considérée CSS site layout

La mise en page présente de sérieux avantages ainsi que de graves inconvénients. Vous devez décider de ce qui est le plus important pour votre site et ses visiteurs.

Inconvénients:

  • Ne fonctionne pas dans Internet Explorer 4, Netscape Navigator 4 est également un navigateur ancien.
  • La disposition CSS (la création de blocs et leur positionnement) n'est pas idéale pour les navigateurs modernes. Par conséquent, la page doit être testée dans tous les navigateurs utilisés par votre salle afin de détecter des différences minimes mais déplaisantes dans l'affichage de la page.
  • La farine à positionnement vertical définit également la hauteur des éléments en CSS. Ce n'est pas si fier, à moins que vous ne vouliez en aucun cas ajuster tous les éléments avec une précision de pixel.
  • Pour notre mise en page, il est nécessaire que la colonne avec le contenu principal ait une hauteur impressionnante par rapport aux colonnes latérales. Sinon, la page sera désordonnée. Pour être honnête, cette demande est typique de la plupart des sites à conception verticale. Si les pages sont écrites manuellement (et ne sont en aucun cas générées par les scripts), la salle peut être «finie» avec des sauts de ligne.
  • Il est difficile de réapprendre de la mise en page tabulaire. Au début, les rembourrages vont commencer à tomber malade des marges :)

Plus:

  • Maîtrisant la mise en page CSS, il est facile de comprendre le code, de changer de style. Avec un arrangement de blocs CSS bien pensé, les modifications de conception mineures ne seront en aucun cas difficiles - il suffit d’éditer le fichier CSS.
  • Les navigateurs de texte sont également obligés d’apprécier notre mise en page par d’autres appareils limités pour la saisie d’informations - sans styles, c’est un simple texte dans une colonne avec un nombre minimal d’éléments de conception XHTML.
  • Sans les styles CSS (c'est-à-dire une mise en page XHTML soignée), il s'agit du titre de la page tout en haut, ainsi que du texte principal qui suit le titre. La «condition requise» (liens, droits d'auteur, navigation, actualités - tout ce qui n'est PAS la raison pour laquelle l'utilisateur est venu sur la page) ralentit tout en bas. Cette disposition de l'information aura un effet bénéfique sur l'attitude vis-à-vis du site de simples dispositifs de saisie de l'information, l'essence même des robots de recherche: ils aiment l'heure à laquelle le texte apparaît sur la page, mais pas les étiquettes tabulaires éternelles.
  • Navigation rapide. En cas de pages impressionnantes ou de connexion lente, le visiteur peut commencer à prononcer le texte principal pendant le chargement des menus latéraux, etc.
  • Mise en page "caoutchouc" - la largeur des blocs de mise en page dépend de la taille de la fenêtre du navigateur. Ainsi, l'espace d'écran utile ne disparaît pas.
  • Mise en œuvre facile pour cette mise en page CSS de la version imprimable de la page.
  • Le code XHTML pur est également conçu à l’aide de CSS, mais pas de tableaux - c’est «cool» et aussi très à la mode. :) .

Peut-être que les avantages l'emportent. Ainsi, si votre site n'est pas dédié à Windows 3.11 ni à la pièce correspondante, si vous êtes prêt à maîtriser le modèle de bloc CSS, vous ne souhaitez pas non plus ajouter d'éléments complexes avec une présentation non standard à la présentation, vous pouvez en dire plus.

Un peu de théorie CSS de la mise en page de sites Web (création de blocs de positionnement CSS également)

Il n'y a aucun désir ou possibilité d'expliquer la théorie en détail. Ce sujet complexe est également vaste. Je vais essayer de “supprimer” les liens et de décrire brièvement ce qui sera directement utilisé dans la mise en page.

Alors, liens:

Maintenant un peu plus loin. Un bloc est un élément rectangulaire d'une page Web, spécifié à l'aide de bloc (par exemple, <div> ou <p>), d'éléments XHTML (à la manière d'un bashurman, balises). Le bloc prend un peu de place et se termine par une nouvelle ligne: une paire d'éléments <div> sera située sur la page l'un en dessous de l'autre, car il s'agit d'éléments de bloc. Une paire d'éléments <i> ne sera en aucun cas, puisqu'il s'agit d'éléments minuscules.

En utilisant CSS, vous pouvez déterminer les paramètres des blocs - bords extérieurs (marge), bordures (bordure), marges intérieures jusqu'au contenu (remplissage), la largeur du contenu (largeur). Le contenu d'un bloc CSS peut manifester du texte, des images, des blocs imbriqués ainsi que des objets ... La propriété background-color définit la couleur d'arrière-plan du bloc, tandis que le champ de la marge est presque toujours transparent. La description de ces propriétés est également une création de bloc CSS.

Le site Web www.ilovejackdaniels.com propose un didacticiel CSS, à partir duquel nous nous sommes permis de supprimer le schéma de blocs CSS, non pas pour violer les droits d'auteur, mais pour améliorer le confort. Et bien sûr, pardonnez-moi ilovejackdaniels.com, qui possède également tous les avantages imaginables et inconcevables de cette image:

Schéma de modèle de boîte CSS

La hauteur du bloc CSS dans la pratique ne peut en aucune manière être définie (nous parlons de disposition «en caoutchouc»), bien sûr, nous n’en avons pas besoin non plus. Mais la largeur du bloc est notre tout, elle est composée de la largeur: marge gauche + bordure gauche + padding gauche + largeur + padding droite + bordure droite / marge droite. Dans la mise en page, la bordure ne sera en aucun cas, nous allons tout faire par le rembourrage, y compris la largeur - c'est aussi plus facile et plus rapide.

La mise en page CSS du site est «rubber», c'est-à-dire que sa largeur dépend de l'espace disponible (taille de la fenêtre du navigateur). Par conséquent, la largeur et le remplissage sont définis en pourcentage. Les pourcentages définissent la largeur par rapport à l'élément parent. L'élément parent est soit une fenêtre de navigateur (en fait, la balise <body>), soit tout élément de bloc dans lequel l'élément désigné est incorporé (dans la présentation, plusieurs <div> seront imbriqués dans un bloc parent <div>).

Les blocs sont créés en utilisant les propriétés définies par CSS (padding, width). Il est nécessaire de les organiser correctement sur la page. C'est aussi le positionnement CSS. Si vous ne décrivez pas l'emplacement des blocs sur la page, ceux-ci seront affichés par le navigateur l'un en dessous de l'autre, conformément au calendrier de leur description dans le code XHTML de la page. Cet arrangement est appelé flux normal.

Il y a différentes manières et techniques. Nous allons utiliser la position: propriétés absolues (positionnement CSS absolu) et la position: relative (positionnement relatif). Ensuite, vous devez déterminer le bloc de décalage de la page (en pixels pour une mise en page matérielle du site ou en pourcentage pour "en caoutchouc") à partir des points de référence supérieur, inférieur, gauche ou droit. Quel est ce point de référence?

Pour position: relative, le point de départ est l'emplacement du bloc dans le flux normal. Ie - position: relative; en haut: 10%; à gauche: 10%; - l'unité se déplacera également de 10% vers la droite également par rapport à son emplacement normal. Si vous enregistrez le positionnement relatif ne définit pas non plus le décalage, le bloc sera situé dans le flux normal.

Pour position: absolute, le point de référence est un élément parfaitement connu; le flux normal et l'emplacement des autres éléments ne jouent aucun rôle. Ce point peut être soit une fenêtre de navigateur, soit un bloc parent, totalement ou relativement bien positionné. De même, le décalage est déterminé par les pixels ou par les pourcentages des propriétés haut, gauche, bas et droite.

Essayons d'extraire de celles-ci apparemment incompatibles avec les règles de vie de l'étincelle raisonnable - toutefois, il s'agit du code de présentation du site à partir de trois colonnes.

XHTML aussi le code de mise en page CSS

Mise en page CSS du site: mise en page en trois colonnes - capture d'écran avec explications

Ici, également ci-dessous, des "morceaux" du code sont aussi des explications pour eux. .

Code xhtml



<code>&lt;html xmlns=http://www.w3.org/1999/xhtml&gt; &lt;head&gt; &lt;title&gt;CSS верстка сайта: макет в три колонки&lt;/title&gt; &lt;link rel=stylesheet type=text/css media=screen href=/style.css /&gt; &lt;link rel=stylesheet type=text/css media=print href=/print.css /&gt; &lt;script language=javascript type=text/javascript&gt; //&lt;![CDATA[ if (navigator.userAgent.indexOf('IE 5')!=-1) document.write('&lt;link rel="stylesheet" type="text/css" media="screen" href="/ie5.css" /&gt;'); //]]&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=header&gt;&lt;p align=justify&gt;CSS верстка сайта: макет в три колонки&lt;/p&gt;&lt;/code&gt; &lt;div id=main&gt; &lt;div id=content&gt; &lt;p align=justify&gt;Информация, как принято вычислять, транспонирует из ряда вон выходящий вселенная...&lt;/p&gt; &lt;p align=justify&gt;Жизнь, пренебрегая деталями, фокусирует примитивный интеллект...&lt;/p&gt; &lt;p align=justify&gt;Напряжение, поэтому, непредсказуемо...&lt;/p&gt; &lt;p align=justify&gt;Представление нетривиально. Созерцание решительно фокусирует постсовременный постмодернизм...&lt;/p&gt; &lt;p align=justify&gt;Представление амбивалентно. Современная ситуация рефлектирует себя чрез принцип восприятия...&lt;/p&gt; &lt;p align=justify&gt;Смысл жизни решительно творит объект деловитости. Жизнь натурально означает вселенная...&lt;/p&gt; &lt;/div&gt; &lt;div id=leftmenu&gt; &lt;p align=justify&gt;&lt;strong&gt;Навигация&lt;/strong&gt;&lt;/p&gt; &lt;p align=justify&gt;&lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4