HTML Layouts_1
HTML a un certain nombre d'éléments qui peuvent être utilisés pour définir chacun de ces domaines. Ceux-ci comprennent le principal. entête. bas de page. nav. de côté et les éléments de l'article. En outre, l'élément div est un élément de niveau bloc générique qui peut être utilisé pour regrouper les éléments HTML.
Mais ces éléments ne fournissent que la structure du document. Ils ne traitent pas de présentation. Donc, nous allons finir avec ceci:
Comme mentionné plus haut dans ce tutoriel, CSS est ce que nous avons besoin pour définir la présentation de nos documents HTML.
Mise en page Grille CSS
Donc, nous pourrions prendre le code HTML ci-dessus, puis utilisez la grille CSS pour positionner chaque élément:
Si votre navigateur prend en charge la mise en page du réseau, cet exemple devrait ressembler à l'exemple en haut de cette page. Ici, il est à nouveau:
Dans cet exemple, nous utilisons la propriété grille-modèle-zones avec une sorte de syntaxe « art ASCII » pour spécifier où chaque élément va. C'est le bit qui ressemble à ceci:
Ensuite, nous relions chaque élément à chacune de ces zones de la grille à l'aide de la propriété grille-région.
Le reste du code traite de dimensionnement, gouttières, esthétique générale, etc.
Layouts Responsive
Nous pouvons modifier l'exemple ci-dessus pour qu'il utilise une disposition différente sur les petits appareils tels que les téléphones mobiles.
Pour ce faire, nous ajoutons une requête de médias pour tester la taille de l'écran. Si elle est inférieure à une certaine largeur, nous leur montrons la nouvelle mise en page.
L'exemple ci-dessus aura tous les éléments empilés les uns sur les autres (sauf si vous affichez cet exemple sur un écran très large). L'empilement des éléments comme celui-ci est idéal pour les petits appareils tels que les téléphones mobiles. Cliquez sur le bouton Aperçu pour la voir dans une nouvelle fenêtre (qui devrait afficher la mise en page originale - à moins que vous regardez déjà ce sur un petit appareil).
Voici la requête des médias, nous avons utilisé pour cet exemple:
Nous changeons simplement l'art ASCII pour refléter notre nouvelle mise en page, dans ce cas, est simplement empiler chaque élément sur le dessus de l'autre (mais dans l'ordre que nous précisons). Nous changeons également les valeurs des lignes et des colonnes au besoin.
Consultez le tutoriel de grille si vous êtes intéressés à en apprendre davantage sur le travail avec la grille.
Non-Grid Browsers
Si cela se sent un peu écrasante, ne désespérez pas! Vous pouvez télécharger ces modèles HTML pour votre propre usage. Vous pouvez ouvrir les fichiers et voir comment chacun est construit. Et vous pouvez les modifier comme vous le souhaitez.
CSS a été conçu pour la présentation. Ainsi, les navigateurs une fois enfin eu (raisonnablement) un soutien constant pour CSS, flotteurs CSS est devenu la norme, où la propriété CSS float serait appliqué pour bloquer les éléments qui devaient asseoir à côté de l'autre. Cela a permis aux développeurs de poursuivre leurs mises en page à trois colonnes tout en gardant la présentation séparée du contenu.
Mais flotteurs ne sont pas vraiment conçus pour les mises en deux dimensions, et il est souvent difficile d'obtenir tous les éléments de la page pour aligner correctement, avec tout à la bonne hauteur, et que rien ne soit par inadvertance poussé vers le bas à la ligne suivante, etc.
L'introduction de FlexBox facilité beaucoup de douleur, car il a fourni une meilleure façon d'aligner des éléments côte à côte, sans de nombreux problèmes inhérents aux flotteurs. Cependant, FlexBox est un système unidimensionnel. Il est parfait pour aligner des éléments à côté les uns des autres, ou empilés les uns sur les autres, mais pas les deux.