Vous cherchez à créer des sites web réactifs pour divers écrans ? Apprenez à utiliser les grilles fluides sous Dreamweaver pour créer des sites web pour les appareils mobiles et les ordinateurs de bureau.

La mise en page d’un site web doit répondre et s’adapter aux dimensions de l’appareil sur lequel le site web apparaît (design réactif). Une mise en forme à grille fluide est un moyen visuel de créer différentes mises en page en fonction de l’appareil sur lequel le site web s’affiche.

Par exemple, votre site web sera consulté sur des postes de travail, 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 appareils. 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 ?

Remarque :

Le mode Inspection n’est pas disponible pour les documents de mise en forme à grille fluide.

Création d’une mise en forme à grille fluide

Remarque :

Vous pouvez modifier les mises en forme à grille fluide existantes dans Dreamweaver CC 2017. En revanche, vous ne pouvez pas en créer de nouvelles. 

En effet, dans Dreamweaver CC 2017, vous devez utiliser bootstrap pour créer des mises en forme réactives. Pour en savoir plus sur Bootstrap, voir Utilisation de fichiers Bootstrap.

  1. Sélectionnez Fichier > Grille fluide (héritée).

  2. 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 appareil, définissez la valeur de votre choix.

  3. Pour définir la largeur d’une page par rapport à la taille de l’écran, indiquez la valeur en pourcentage.

  4. Vous pouvez également modifier la largeur de la gouttière. La gouttière correspond à l’espace entre deux colonnes.

  5. 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.

  6. 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 appareils. respond.min.js est une bibliothèque JavaScript qui contribue à la prise en charge des requêtes multimédias dans les anciens navigateurs.

Modification de documents à grille fluide

Vous pouvez modifier les documents à grille fluide directement en mode En direct afin d’effectuer les actions suivantes :

Vous pouvez également visualiser la structure du DOM HTML d’un document à grille fluide à l’aide de la vue Affichage rapide des éléments.

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 page à grille fluide. Lors de l’insertion d’éléments, vous pouvez choisir de les insérer sous forme d’éléments fluides.

  1. Dans le panneau Insertion, cliquez sur l’élément à insérer.

  2. Dans la boîte de dialogue qui s’affiche, cliquez sur Avant, Après ou Imbriquer afin de positionner l’élément en fonction de l’élément de référence en surbrillance dans le document.

  3. 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.

  4. Activez la case à cocher Insérer en tant qu’élément fluide.

  5. Lorsque vous sélectionnez un élément inséré, les options permettant de masquer, dupliquer 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
    Description
    Permuter la balise div Permute l’élément actuellement sélectionné avec l’élément au-dessus ou en dessous.
    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.
    Remonter d’une ligne Déplace l’élément d’une rangée vers le haut.
    Dupliquer Duplique l’élément actuellement sélectionné. Le code CSS lié à l’élément est également dupliqué.
    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é.
    Alignement 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 d’une page de manière cyclique en utilisant les touches fléchées vers le haut et le bas. 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).

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne