Lorsque les pages ne sont pas papier: le Guide du concepteur relatif au code de mise en page
Les boîtes InDesign sont aussi simples que cliquer-glisser. Les calques de Photoshop permettent aux peintres de colorer les pixels partout où ils le souhaitent. Mais la mise en page avec HTML et CSS est un jeu de nudging et de cascade.
Cela se produit tous les jours: les directeurs artistiques de Photoshop font des maquettes de dessins, affinant leur espacement, choisissant soigneusement les polices et les couleurs appropriées. Ils remettent leur travail à un développeur HTML avide, qui annonce que la conception prendra probablement des jours pour se transformer en HTML / CSS. Pire encore, ils apporteront des modifications pour tenir compte des différentes tailles d'écran. Le timing est un mystère pour les deux parties. Le développeur aura-t-il besoin d'une heure ou d'une semaine pour transformer son fichier PSD en HTML / CSS fonctionnel?
Les bases de la mise en page Web - le possible, le pratique, les possibilités - sont faciles à comprendre. Tout comme le design lui-même, la compréhension des principes aidera tout concepteur à produire de meilleures conceptions et à accélérer le processus de construction d’un site.
Empilement d'éléments de blocs, flux d'éléments en ligne
Tout sur une page Web, des paragraphes aux images en passant par les liens vers le texte en gras, réside dans des boîtes invisibles. Ces boîtes existent en deux variétés: bloc et ligne. La différence entre inline et block réside dans leur comportement.
Les éléments de bloc sont des rectangles. Ils aiment remplir l'espace horizontal.
Les éléments en ligne sont rectangulaires, sauf qu'ils peuvent être enroulés.
Les éléments de bloc s'empilent les uns sur les autres. Sauf indication contraire, ils occupent autant d'espace horizontal que possible, poussant tout autour d'eux vers le haut ou le bas. Pour la conception, les éléments de bloc constituent l'outil de mise en page principal.
Les éléments en ligne sont basés sur la mise en forme du texte. Ils ne rompent pas le flux de texte et leurs dimensions s’élargissent pour s’adapter à leur contenu. Dire à un élément en ligne de conserver une largeur de 200 pixels ne fonctionnera pas. Remplir avec du texte va.
Par défaut, chaque élément du est soit un élément en ligne, soit un élément de bloc. Les concepteurs peuvent changer leur nature avec un peu de CSS - par exemple, transformer une pile d'éléments de liste (en blocs natifs) en une rangée, ou une série de liens horizontaux (en ligne natif) en une pile verticale. Cela signifie que tout élément visible peut être utilisé pour la mise en page. Leur choix dépend de la mise en page en question.
Les éléments de bloc natifs incluent:
Divisions
Paragraphes
Des listes
Articles dans une liste
Les titres -
les tables
Blocage de devis
Organisateurs en HTML5 , , , , et
Le corps lui-même
Les éléments en ligne incluent:
Ancres (hyperliens)
Audacieux et
Italique et
Images
Citations
Type de style
Étiquettes de formulaire
Dépend de vous
Tags communs qui ne sont ni bloc ni inline:
Le titre du document </code></li><li> Les balises Meta <code><meta></code></li><li> Balises de script <code><script></code></li><li> Balises de lien <code><link></code></li></ul><p> À première vue, s’adapter à la mentalité de type lego semble contre-intuitif dans un média qui permet des dégradés, des courbes et des dispositions élastiques. Mais l'idée de tout comme une brique est cruciale pour comprendre où le contenu et la présentation se rencontrent. </p><p> Directive: chaque paire de balises (ou de balises autonomes comme <code><img></code> ) dans le corps représente une boîte. </p><p class=clearrow></p><h2> Utiliser des blocs pour la mise en page </h2><p> Supprimez un bloc de texte dans InDesign et la photo adjacente ne bougera pas, car l'emplacement de l'un ne dépend pas de l'autre. Appliquez des courbes sur un calque Photoshop et aucun autre calque ne changera car les courbes affectent un calque à la fois. Mais supprimez un élément en HTML, et tout ce qui après cet élément changera probablement. Blocs dans une pile de pages Web dans le coin supérieur gauche de leur conteneur, tels que le <code><body></code> ou un autre bloc. </p><p> Toute la mise en page Web est réalisée avec des éléments de bloc. Les concepteurs utilisent des blocs, le plus souvent <code><div></code> éléments, pour créer des zones rectangulaires dans lesquelles tous les contenus correspondent. Il n'y a que quatre règles: </p><ul class=tight_list><li> Largeur totale: L'espace qu'un élément occupe <em>et</em> affecte. </li><li> Float: Modification de la tendance des blocs à s'empiler. </li><li> Effacer: Re-estblishing piles. </li><li> Nid: les éléments sont entre eux ou non. Il n'y a pas de demi-chemin </li></ul><p> Chaque règle comporte des réserves ... mais aucune n’est requise pour assembler une page. </p><p> (Les experts du CSS reconnaîtront que ces règles s’appliquent aux éléments avec un positionnement relatif. Le positionnement absolu est un animal différent et moins commun.) </p><h3> 1. Largeur totale = boîte et tampon </h3><p> La largeur totale est la quantité d'espace horizontal occupée par un bloc. Cela inclut la marge, la bordure et le remplissage du bloc. En langage imprimé, la marge et le rembourrage sont des types de gouttières. Mais contrairement à l'espace négatif traditionnel, créé en poussant les boîtes à part, le remplissage et la marge font partie d'une boîte. Ils aiment le crénage pour les éléments de mise en page. </p><p> Calculer la largeur, le remplissage et la marge est souvent le plus grand casse-tête pour les concepteurs, mais les règles restantes sont un peu plus simples. </p><h3> 2. Flottant frappe des blocs de la pile </h3><p> Le flottement pousse un élément de bloc vers la gauche ou la droite, en le retirant de la pile naturelle. Quand un bloc flotte, il fait de la place pour que tout ce qui se trouve en dessous se soulève de l'autre côté. </p><div class=article-large-block><img class="img-responsive aligncenter center-block" title="boxmodel-flottant-vs-pas" alt="Float versus not" src="https://odwebdesign.net/uploads/d/09/cf/when-pages-are-not-paper-the-designers-guide-to-layout-code_2.png" width=615 height=288></div><p> Les colonnes apparaissent lorsqu'une série de blocs flotte l'un à côté de l'autre. </p><h3> 3. Effacement: permet aux concepteurs d'organiser une page à la fois horizontalement et verticalement </h3><p> Un effet secondaire regrettable du flottement est son impact sur le conteneur. Un conteneur se développera verticalement pour s'adapter à son contenu, sauf ceux qui flottent. Si tout flotte, alors la boîte n'a pas de hauteur. Tout ce qui se trouve sous les objets flottants. Le chaos s'ensuit. </p><p> La suppression reprend la tendance naturelle des blocs à s'empiler. En effet, il rappelle à un conteneur qu'il a quelque chose à contenir. Sans effacer, les concepteurs ne peuvent pas organiser une page à la fois horizontalement et verticalement. </p><div class=article-large-block><img class="img-responsive aligncenter center-block" title="boxmodel-besoin d'être clair" alt="Need to clear" src="https://odwebdesign.net/uploads/7/58/b3/when-pages-are-not-paper-the-designers-guide-to-layout-code_3.png" width=615 height=288></div><h3> 4. nidification </h3><p> L'imbrication est simple: chaque bloc doit résider complètement dans un autre bloc. Aucun bloc ne peut jamais dépasser ses limites sans conséquences graves, et deux blocs ne peuvent pas se chevaucher partiellement. </p><p class=clearrow></p><h2> Les colonnes doivent correspondre ou bien </h2><p> C'est là que les concepteurs doivent effectuer un petit calcul. Pour ajuster correctement les colonnes, la somme de leurs largeurs totales doit être inférieure à la largeur de leur conteneur. </p><p> Les colonnes sont une série d'éléments de bloc qui poussent à gauche ou, plus rarement, à droite. Si ces colonnes sont trop larges pour leur conteneur, sans techniques spéciales, la dernière colonne sera inférieure aux autres. </p><p> Une mise en page simple peut utiliser trois <code><div></code> éléments pour créer une mise en page à deux colonnes: </p><p><code><div id="container"><br /> <div id="main-content"><br /> …<br /> </div><br /> <div id="sidebar"><br /> …<br /> </div><br /></div></code></p><div class=article-large-block><img class="img-responsive aligncenter center-block" title="boxmodel-divs-to-not-fit" alt="Divs to not fit" src="https://odwebdesign.net/uploads/7/a0/8a/when-pages-are-not-paper-the-designers-guide-to-layout-code_4.png" width=615 height=400></div><p> Au-dessus, l'exemple de gauche utilise ce CSS: </p><p><code>#container { width: 1000px; }<br />#main-content { width: 600px; padding: 20px; }<br />#sidebar { width: 340px; padding: 10px; }</code></p><p> Le conteneur mesure 1000 pixels de large. Le bloc de contenu principal a une largeur de 640 pixels - une largeur de 600 + 20 pixels de chaque côté. Le bloc de la barre latérale mesure 360 pixels de largeur - 340 de largeur + 10 pixels de remplissage de chaque côté. (600 + 20 + 20) + (340 + 10 + 10) = 1000. Un ajustement parfait. </p><p> Dans l'exemple de droite, cependant, quelque chose de trop large. Ce pourrait être le remplissage de la colonne ou la largeur de la colonne elle-même. Peut-être que le conteneur est trop étroit. Changer l'un de ces facteurs pour rendre le conteneur plus large que les colonnes permettrait de résoudre le problème. </p><p class=clearrow></p><h2> Les exceptions nécessitent plus de code; l'uniformité exige moins </h2><p> À la différence des médias visuels plus traditionnels - par exemple, la sculpture ou la conception graphique - l'écriture de code nécessite une image mentale forte de ce que le code fera. </p><p> Certains aspects de la conception par code sont évidents. Les conceptions simples utilisent souvent moins de code que les conceptions complexes. Si la solution à un problème de conception nécessite que chaque widget, colonne et texte ait sa propre couleur d’arrière-plan, qu’il en soit ainsi. Cela nécessite juste plus de code. </p><ul class=tight_list><li> Si un morceau de texte est plus grand que d'autres, il a besoin de sa propre entrée dans le fichier CSS. </li><li> Si deux colonnes ont des largeurs différentes, le fichier CSS doit spécifier des largeurs pour chacune. </li><li> Si une conception nécessite trois types de puces, la CSS requiert trois définitions. </li></ul><p> Un fait moins évident du design-by-code est que c'est moins évident. L'imagination et l'expérience sont particulièrement nécessaires dans la mise en page des pages où la modification de la marge d'une colonne aura un impact sur ses voisins. Lors de la transition de la conception imprimée à la conception Web, l’imagination des résultats ne permet pas d’imaginer de nouveaux développeurs. </p><p> Pas ça <code>color:blue</code> est difficile à comprendre. Mais c'est une chose d'écrire <code>div { background: url(photo.jpg) top left no-repeat; }</code> et un autre pour voir une photo dans le contexte de la page. </p><p> Heureusement, certaines analogies facilitent l'apprentissage. </p><ol><li> <strong>Considérez CSS comme fonctionnant entièrement avec les styles de paragraphe.</strong> Modifier un objet à la volée est encombrant. Le CSS fonctionne mieux lorsqu'il est appliqué à une classification entière d'images ou de mots (d'où l'attribut "class" en HTML). </li><li> <strong>Imaginez que vous visualisez un quart de page à la fois.</strong> À tout moment, les utilisateurs ne voient qu'une partie de la page Web, car la plupart des pages Web sont plus grandes que la fenêtre moyenne du navigateur. Les utilisateurs finaux ne voient qu'une pièce à la fois. Le "pli" se produit sur les quatre côtés du navigateur. </li><li> <strong>Demandez-vous "si chaque élément a doublé en quantité?" Les</strong> bons designs présentent bien le contenu au lancement. De superbes conceptions Web continuent de le faire. Les modèles d'article doivent contenir des articles de longueur variable. Les gestionnaires de contenu suppriment l'ancien texte ou ajoutent de nouvelles photos non conformes aux proportions planifiées. Les clients décident qu'ils veulent leurs cinq derniers tweets sur la page d'accueil. Personne ne sait comment un site peut changer, mais la planification de différentes quantités est une bonne mesure de précaution. </li></ol><p class=clearrow></p><h2> Avancer </h2><p> La compréhension de la mise en page Web présente les avantages suivants: savoir ce qui est possible, éviter les pièges courants et accélérer les temps de développement. Mais apprendre à concevoir avec HTML / CSS nécessite un changement de mentalité. Systèmes CSS comme <a src="<!-- not_img -->http://960.gs/" class=external rel=nofollow>le système de grille 960</a> </a> <a src="<!-- not_img -->http://960.gs/" class=external rel=nofollow>minimiser le travail technique requis, facilitant la transition du travail en pixels purs au code.</a> <a src="<!-- not_img -->http://960.gs/" class=external rel=nofollow>Mais, comme pour apprendre une langue, le meilleur outil peut être la persistance.</a> </p><p class=clearrow></p><p> <em><strong>Qu'est-ce qui vous donne le plus de difficulté à transformer des maquettes en HTML et CSS?</strong></em> <em><strong>Partagez vos expériences et solutions dans les commentaires ci-dessous.</strong></em> </p><p> <em>La vignette</em> <em><a href="http://www.shutterstock.com/pic-79732636/stock-photo-abstract-image-of-cubes-background-in-blue-toned.html" class=external rel=nofollow></em> <em>via shutterstock</em></a></p>
<div class="bootstrap-tagsinput">
<span class="tag label label-info"><a href="https://fr.odwebdesign.net/tag/creation-de-sites-web/">création de sites web</a> </span>
<span class="tag label label-info"><a href="https://fr.odwebdesign.net/tag/disposition/">disposition</a> </span>
<span class="tag label label-info"><a href="https://fr.odwebdesign.net/tag/systeme-de-grille-960/">Système de grille 960</a> </span>
<span class="tag label label-info"><a href="https://fr.odwebdesign.net/tag/elements-de-bloc/">éléments de bloc</a> </span>
<span class="tag label label-info"><a href="https://fr.odwebdesign.net/tag/modele-de-boite/">modèle de boîte</a> </span>
<span class="tag label label-info"><a href="https://fr.odwebdesign.net/tag/flottant/">flottant</a> </span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="pager">
<li class="previous"><a href="https://fr.odwebdesign.net/creating-a-modal-window-with-html5-and-css3/">← Création d'une fenêtre modale avec HTML5 & Amp; CSS3</a></li>
<li class="next"><a href="https://fr.odwebdesign.net/vintage-effects-for-your-images-with-html5/">Effets vintage pour vos images avec HTML5 →</a></li> </ul>
</div>
</div>
</div>
<div class="col-md-3">
<aside class="col-lg-12 side-bar col-md-12">
<ul class="nav nav-tabs">
<li class="active"> <a data-toggle="tab" href="#latest" role="tab">Dernier</a> </li>
<li> <a data-toggle="tab" href="#popular" role="tab">Le meilleur</a> </li>
</ul>
<!-- Tab panes -->
<div class="tab-content sidebar-tabing" id="nav-tabContent">
<div class="tab-pane active" id="latest" role="tabpanel">
<div class="media"> <a href="https://fr.odwebdesign.net/creating-your-first-interactive-javascript-chart/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/5/30/85/creating-your-first-interactive-javascript-chart_ors.jpg" alt=""></a>
<div class="media-body">
<div class="title-small-sidebar">
<a href="https://fr.odwebdesign.net/creating-your-first-interactive-javascript-chart/">Création de votre premier graphique JavaScript interactif</a>
</div>
</div>
</div>
<div class="media"> <a href="https://fr.odwebdesign.net/supercharge-your-site-with-a-cdn/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/d/ad/1d/supercharge-your-site-with-a-cdn_ors.jpg" alt=""></a>
<div class="media-body">
<div class="title-small-sidebar">
<a href="https://fr.odwebdesign.net/supercharge-your-site-with-a-cdn/">Renforcez votre site avec un CDN</a>
</div>
</div>
</div>
<div class="media"> <a href="https://fr.odwebdesign.net/getting-started-with-vue-js/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/d/9f/40/getting-started-with-vue-js_ors.png" alt=""></a>
<div class="media-body">
<div class="title-small-sidebar">
<a href="https://fr.odwebdesign.net/getting-started-with-vue-js/">Premiers pas avec Vue.Js</a>
</div>
</div>
</div>
<div class="media"> <a href="https://fr.odwebdesign.net/how-to-create-and-manage-svg-sprites/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/2/f2/da/how-to-create-and-manage-svg-sprites_ors.jpg" alt=""></a>
<div class="media-body">
<div class="title-small-sidebar">
<a href="https://fr.odwebdesign.net/how-to-create-and-manage-svg-sprites/">Comment créer et gérer des sprites SVG</a>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="popular" role="tabpanel">
<div class="media"> <a href="https://fr.odwebdesign.net/password-strength-verification-with-jquery/"> <img class="pull-left" src="https://odwebdesign.net/uploads//noima.jpg" alt=""></a>
<div class="media-body">
<div class="title-small-sidebar">
<a href="https://fr.odwebdesign.net/password-strength-verification-with-jquery/">Vérification de la force du mot de passe avec jQuery</a>
</div>
</div>
</div>
<div class="media"> <a href="https://fr.odwebdesign.net/zurbs-newest-offering-for-developers-foundation/"> <img class="pull-left" src="https://odwebdesign.net/uploads//noima.jpg" alt=""></a>
<div class="media-body">
<div class="title-small-sidebar">
<a href="https://fr.odwebdesign.net/zurbs-newest-offering-for-developers-foundation/">La nouvelle offre de Zurb pour les développeurs: Foundation</a>
</div>
</div>
</div>
<div class="media"> <a href="https://fr.odwebdesign.net/are-you-being-innovative/"> <img class="pull-left" src="https://odwebdesign.net/uploads//noima.jpg" alt=""></a>
<div class="media-body">
<div class="title-small-sidebar">
<a href="https://fr.odwebdesign.net/are-you-being-innovative/">Êtes-vous innovant?</a>
</div>
</div>
</div>
<div class="media"> <a href="https://fr.odwebdesign.net/web-design-predictions-for-2012/"> <img class="pull-left" src="https://odwebdesign.net/uploads//noima.jpg" alt=""></a>
<div class="media-body">
<div class="title-small-sidebar">
<a href="https://fr.odwebdesign.net/web-design-predictions-for-2012/">Prévisions de conception Web pour 2012</a>
</div>
</div>
</div>
</div>
</div>
</aside>
</div>
</div>
<footer class="footer-bs">
<div class="row">
<div class="col-md-3 footer-brand animated fadeInLeft">
<img src="https://fr.odwebdesign.net/img/logo1n.png">
</div>
<div class="col-md-9 footer-nav animated fadeInRight">
<ul class="list">
<li><a href="https://fr.odwebdesign.net/category/freebies/">Freebies</a></li>
<li><a href="https://fr.odwebdesign.net/category/interactive-design/">Design interactif</a></li>
<li><a href="https://fr.odwebdesign.net/contact_us/">Contactez nous</a> </li>
</ul>
<br>
<h4>OdWebDesign.Net</h4>
</div>
</div>
<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//odwebdesign.net/";
_paq.push(["setTrackerUrl", u+"piwik.php"]);
_paq.push(["setSiteId", "470"]);
var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0];
g.type="text/javascript"; g.async=true; g.defer=true; g.src=u+"piwik.php"; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Piwik Code -->
</footer>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
</body>
</html>
