diff options
Diffstat (limited to 'files/fr/learn/common_questions/common_web_layouts/index.html')
| -rw-r--r-- | files/fr/learn/common_questions/common_web_layouts/index.html | 21 |
1 files changed, 10 insertions, 11 deletions
diff --git a/files/fr/learn/common_questions/common_web_layouts/index.html b/files/fr/learn/common_questions/common_web_layouts/index.html index 2b54571c67..5fba68714b 100644 --- a/files/fr/learn/common_questions/common_web_layouts/index.html +++ b/files/fr/learn/common_questions/common_web_layouts/index.html @@ -11,11 +11,10 @@ translation_of: Learn/Common_questions/Common_web_layouts original_slug: Apprendre/Concevoir_page_web --- <div>{{IncludeSubnav("/fr/Apprendre")}}</div> -<div class="summary"> + <p>Lorsque vous concevez des pages pour votre site Internet, il est utile d'avoir en tête les modèles de mise en page les plus fréquemment utilisés.</p> -</div> -<table class="learn-box nostripe standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -53,19 +52,19 @@ original_slug: Apprendre/Concevoir_page_web <p><strong>Dispostion à une colonne : </strong>particulièrement utile pour l'affichage sur téléphone mobile, car cette disposition évite d'encombrer les petits écrans.</p> -<p><img alt="Example of a 1 column layout: Main on top and asides stacked beneath it." src="https://mdn.mozillademos.org/files/9501/1-col-layout.png" style="height: 100px; width: 160px;"></p> +<p><img alt="Example of a 1 column layout: Main on top and asides stacked beneath it." src="1-col-layout.png"></p> <p><strong>Disposition à deux colonnes :</strong> souvent utilisée pour l'affichage sur tablettes, car elles disposent d'un écran de taille moyenne.</p> -<p> <img alt="Example of a basic 2 column layout: One aside on the left column, and main on the right column." src="https://mdn.mozillademos.org/files/9499/2-col-layout-right.png" style="height: 100px; width: 160px;"> <img alt="Example of a basic 2 column layout: One aside on the right column, and main on the left column." src="https://mdn.mozillademos.org/files/9497/2-col-layout-left.png" style="height: 100px; width: 160px;"></p> +<p> <img alt="Example of a basic 2 column layout: One aside on the left column, and main on the right column." src="2-col-layout-right.png"> <img alt="Example of a basic 2 column layout: One aside on the right column, and main on the left column." src="2-col-layout-left.png"></p> <p><strong>Disposition à trois colonnes :</strong> adaptée uniquement pour les ordinateurs de bureau ayant un grand écran (et encore, cela est relatif, car plusieurs utilisateurs d'ordinateurs de bureau préférent visionner les sites dans des fenêtres de taille réduite plutôt qu'en mode plein écran).</p> -<p><img alt="Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column." src="https://mdn.mozillademos.org/files/9491/3-col-layout.png" style="height: 100px; width: 160px;"> <img alt="Another example of a 3 column layout: Aside side by side on the left, Main on the right column." src="https://mdn.mozillademos.org/files/9493/3-col-layout-alt.png" style="height: 100px; width: 160px;"> <img alt="Another example of a 3 column layout: Aside side by side on the right, Main on the left column." src="https://mdn.mozillademos.org/files/9495/3-col-layout-alt2.png" style="height: 100px; width: 160px;"></p> +<p><img alt="Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column." src="3-col-layout.png"> <img alt="Another example of a 3 column layout: Aside side by side on the left, Main on the right column." src="3-col-layout-alt.png"> <img alt="Another example of a 3 column layout: Aside side by side on the right, Main on the left column." src="3-col-layout-alt2.png"></p> <p>Il est aussi possible de mélanger tous ces modèles classiques :</p> -<p><img alt="Example of mixed layout: Main on top and asides beneath it side by side." src="https://mdn.mozillademos.org/files/9503/1-col-layout-alt.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column" src="https://mdn.mozillademos.org/files/9505/2-col-layout-left-alt.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main." src="https://mdn.mozillademos.org/files/9507/2-col-layout-mix.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside convering the whole second row." src="https://mdn.mozillademos.org/files/9509/2-col-layout-mix-alt.png" style="height: 100px; width: 160px;">…</p> +<p><img alt="Example of mixed layout: Main on top and asides beneath it side by side." src="1-col-layout-alt.png"> <img alt="Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column" src="2-col-layout-left-alt.png"> <img alt="Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main." src="2-col-layout-mix.png"> <img alt="Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside convering the whole second row." src="2-col-layout-mix-alt.png">…</p> <p>Sachez que ce ne sont que des exemples et que vous êtes libre de disposer les sections à votre façon. Vous remarquerez toutefois que l'en-tête demeure toujours en haut et le bas de page, en bas, peu importe les autres déplacements du contenu. Aussi, comme la section la plus importante est celle du contenu principal, assurez-vous d'y laisser le plus de place possible.</p> @@ -83,7 +82,7 @@ original_slug: Apprendre/Concevoir_page_web <p><strong><a href="http://www.invisionapp.com/" rel="external">Invision</a> </strong>: un exemple de disposition classique à une colonne où toute l'information est présentée de façon linéaire sur une page.</p> -<p><img alt="Example of a 1 column layout in the wild" src="https://mdn.mozillademos.org/files/9523/screenshot-product.jpg" style="height: 643px; width: 200px;"> <img alt="1 column layout with header, main content, a stack of aside contents and a footer" src="https://mdn.mozillademos.org/files/9525/screenshot-product-overlay.jpg" style="height: 643px; width: 200px;"></p> +<p><img alt="Example of a 1 column layout in the wild" src="screenshot-product.jpg"> <img alt="1 column layout with header, main content, a stack of aside contents and a footer" src="screenshot-product-overlay.jpg"></p> <p>Un style simple et direct. N'oubliez pas, toutefois, que certains utilisateurs navigeront à partir d'un ordinateur de bureau et qu'il faut donc s'assurer que le contenu soit accessible sur cette plateforme également.</p> @@ -91,7 +90,7 @@ original_slug: Apprendre/Concevoir_page_web <p><strong><a href="http://abduzeedo.com/typography-mania-261" rel="external">Abduzeedo</a></strong>, un blog à disposition simple. En règle générale, les blogs comprennent deux colonnes : une large pour le contenu principal et une plus étroite pour les à-côtés (comme des widgets, les menus de navigation et les publicités).</p> -<p><img alt="Example of a 2 column layout for a blog" src="https://mdn.mozillademos.org/files/9527/screenshot-blog.jpg" style="height: 643px; width: 200px;"> <img alt="A 2 column layout with the main content on the left column" src="https://mdn.mozillademos.org/files/9529/screenshot-blog-overlay.jpg" style="height: 643px; width: 200px;"></p> +<p><img alt="Example of a 2 column layout for a blog" src="screenshot-blog.jpg"> <img alt="A 2 column layout with the main content on the left column" src="screenshot-blog-overlay.jpg"></p> <p>Dans cet exemple, regardez bien l'image (B1) située directement sous l'en-tête. L'image est en rapport avec le contenu principal, mais n'est pas essentielle à sa compréhension. Nous pourrions donc considérer que l'image fait partie du contenu principal ou bien qu'il s'agit d'un à-côté (contenu secondaire). La distinction importe peu. Ce qui est vraiment important, c'est qu'un élément placé directement sous l'en-tête devrait soit faire partie du contenu principal, soit y être <em>directement relié</em>.</p> @@ -99,7 +98,7 @@ original_slug: Apprendre/Concevoir_page_web <p><strong><a href="http://www.mica.edu/About_MICA.html" rel="external">MICA</a></strong>. Cet exemple est un peu plus embêtant. On dirait une disposition à trois colonnes…</p> -<p><img alt="Example of a false 3 columns layout" src="https://mdn.mozillademos.org/files/9531/screenshot-education.jpg" style="height: 267px; width: 200px;"> <img alt="It looks like a 3 columns layout but actually, the aside content is floating around." src="https://mdn.mozillademos.org/files/9533/screenshot-education-overlay.jpg" style="height: 267px; width: 200px;"></p> +<p><img alt="Example of a false 3 columns layout" src="screenshot-education.jpg"> <img alt="It looks like a 3 columns layout but actually, the aside content is floating around." src="screenshot-education-overlay.jpg"></p> <p>…mais non ! B1 et B2 flottent autour du contenu principal. Rappelez-vousce mot-clé : "flotte" (<em>float</em> en anglais) - nous y reviendrons lorsque vous commencerez à apprendre le {{Glossary("CSS")}}.</p> @@ -111,7 +110,7 @@ original_slug: Apprendre/Concevoir_page_web <p><strong>L'<a href="https://www.operadeparis.fr/en/saison-2014-2015/opera/la-boheme-puccini" rel="external">Opéra de Paris</a>.</strong></p> -<p><img alt="An example of a tricky layout." src="https://mdn.mozillademos.org/files/9535/screenshot-opera.jpg" style="height: 424px; width: 200px;"> <img alt="This is a 2 column layout but the header is overlaping the main content." src="https://mdn.mozillademos.org/files/9537/screenshot-opera-overlay.jpg" style="height: 424px; width: 200px;"></p> +<p><img alt="An example of a tricky layout." src="screenshot-opera.jpg"> <img alt="This is a 2 column layout but the header is overlaping the main content." src="screenshot-opera-overlay.jpg"></p> <p>Il s'agit à la base d'une disposition à deux colonnes, mais vous noterez quelques ajustements ici et là qui viennent rompre la linéarité de la disposition. On remarque surtout que l'en-tête est superposée à l'image du contenu principal. En raison de la courbe du menu de navigation qui rappelle celle au bas de l'image principale, l'en-tête et l'image semblent former un seul élément uni alors qu'il s'agit en fait d'éléments techniquement distincts. L'exemple de l'Opéra de Paris semble plus complexe à réaliser que celui de MICA, mais est en réalité plus facile à mettre en place (la facilité étant bien entendu, un concept plutôt relatif).</p> |