Sélectionnez Fichier > Nouvelle mise en forme à grille fluide.
Dernière mise à jour le
2 mai 2021
La mise en page d’un site Web doit répondre et s’adapter aux dimensions du périphérique sur lequel le site Web apparaît. Les mises en forme à grille fluide sont un moyen visuel de créer différentes mises en page en fonction du périphérique sur lequel le site Web s’affiche.
Par exemple, votre site Web sera consulté sur des périphériques de bureau, des tablettes et des téléphones portables. Vous pouvez utiliser les mises en forme à grille fluide pour spécifier la mise en page sur chacun de ces périphériques. Selon que le site Web est destiné à être consulté sur un ordinateur de bureau, une tablette ou un téléphone portable, la mise en forme correspondante est utilisée pour l’affichage.
Pour plus d’informations : Mise en forme adaptative ou mise en forme réactive ?
La version Creative Cloud de Dreamweaver 12.2 comprend de nombreuses améliorations des dispositions à grille fluide, comme la prise en charge des éléments structurels HTML5 et la modification aisée des éléments imbriqués. Vous trouverez la liste complète des améliorations en cliquant ici.
Remarque :
Le mode Inspection pour les documents avec mise en forme à grille fluide n’est pas disponible dans Dreamweaver 13.1 et les versions ultérieures.
Utilisation de mises en forme à grille fluide
Pour découvrir comment utiliser les mises en forme à grille fluide, regardez ce didacticiel vidéo : Découverte des mises en forme à grille fluide.
Création d’une mise en forme à grille fluide
-
-
La valeur par défaut pour le nombre de colonnes dans la grille s’affiche au centre du type de support. Pour personnaliser le nombre de colonnes pour un périphérique, définissez la valeur de votre choix.
-
Pour définir la largeur d’une page par rapport à la taille de l’écran, indiquez la valeur en pourcentage.
-
Vous pouvez également modifier la largeur de la gouttière. La gouttière correspond à l’espace entre deux colonnes.
-
Spécifiez les options CSS de la page.
Lorsque vous cliquez sur Créer, vous êtes invité à préciser un fichier CSS. Vous pouvez effectuer l’une des opérations suivantes :
- Créer un nouveau fichier CSS.
- Ouvrir un fichier CSS existant.
- Préciser que le fichier CSS en cours d’ouverture est un fichier CSS à grille fluide.
La grille fluide pour téléphones portables est affichée par défaut. Le panneau Insertion correspondant à la grille fluide est par ailleurs affiché. Utilisez les options du panneau Insertion pour créer votre mise en forme.
Pour créer une mise en forme pour d’autres appareils, cliquez sur l’icône correspondante dans les options situées sous le mode Création.
-
Enregistrez le fichier. Lorsque vous enregistrez le fichier, vous êtes invité à enregistrer les fichiers dépendants, tels que boilerplate.css et respond.min.js, dans un emplacement sur votre ordinateur. Spécifiez un emplacement, puis cliquez sur Copier.
Le fichier boilerplate.css est basé sur le contenu passe-partout HTML5. Il s’agit d’un jeu de styles CSS qui assure la cohérence du rendu de votre page Web sur plusieurs périphériques. respond.min.js est une bibliothèque JavaScript qui contribue à la prise en charge des requêtes multimédias dans les anciens navigateurs.
Insertion d’éléments de grille fluide
Le panneau Insertion (Fenêtre > Insertion) répertorie les éléments que vous pouvez utiliser dans une mise en forme à grille fluide. Lors de l’insertion des éléments, vous pouvez les insérer sous forme d’éléments fluides.
-
Dans le panneau Insertion, sélectionnez l’élément à insérer.
-
Dans la boîte de dialogue qui s’affiche, sélectionnez une classe ou entrez une valeur pour l’ID. Les classes du fichier CSS que vous avez spécifié lors de la création de la page s’affichent dans le menu Classe.
-
Activez la case à cocher Insérer en tant qu’élément fluide.
-
Lorsque vous sélectionnez un élément inséré, les options permettant de masquer, dupliquer, verrouiller ou supprimer la balise div s’affichent. Pour les balises div placées les unes au-dessus des autres, l’option de permutation des balises div s’affiche.
Option Libellé Description A Permuter l’élément div Permute l’élément actuellement sélectionné avec l’élément au-dessus ou en dessous.
B Masquer Masque l’élément.
Pour afficher un élément, effectuez l’une des opérations suivantes :
Pour afficher les sélecteurs de type ID, modifiez la propriété d’affichage dans le fichier CSS et remplacez-la par bloc. (display:block)
Pour afficher les sélecteurs de classe, supprimez la classe appliquée (hide_<MediaType>) dans le code source.
C Remonter d’une ligne Déplace l’élément d’une rangée vers le haut.
D Dupliquer Duplique l’élément actuellement sélectionné. Le code CSS lié à l’élément est également dupliqué.
E Supprimer Pour les sélecteurs d’ID, supprime à la fois le code HTML et le code CSS. Pour supprimer uniquement le code HTML, appuyez sur la touche Suppr.
Pour les sélecteurs de classe, seul le code HTML est supprimé.
F Verrouiller Convertit l’élément en un élément à positionnement absolu.
G Aligner Pour les sélecteurs de classe, l’option Alignement agit comme un bouton de marge zéro.
Pour les sélecteurs d’ID, le bouton Alignement aligne l’élément sur la grille.Remarque :Il est possible de parcourir les éléments fluides d’une page de manière cyclique en utilisant les touches fléchées gauche et droite. Sélectionnez la limite de l’élément, puis appuyez sur la touche fléchée.
Imbrication d’éléments
Pour imbriquer des éléments fluides dans d’autres éléments fluides, assurez-vous que le focus se trouve à l’intérieur de l’élément parent. Insérez ensuite l’élément enfant requis.
La duplication imbriquée est également prise en charge. La duplication imbriquée permet de dupliquer le code HTML (de l’élément sélectionné) et de générer le code CSS de grille fluide. Les éléments absolus contenus dans l’élément sélectionné sont positionnés en conséquence. Il est par ailleurs possible de dupliquer les éléments imbriqués à l’aide du bouton Dupliquer.
Lorsque vous supprimez un élément parent, le code CSS correspondant à l’élément, ses enfants et le code HTML associé sont également supprimés. Il est possible de supprimer simultanément tous les éléments imbriqués à l’aide du bouton Supprimer (raccourci clavier : Ctrl+Suppr).
Adobe
Recevez de l’aide plus rapidement et plus facilement
Nouvel utilisateur ?