Guide d'utilisation Annuler

Design réactif à l’aide de mises en forme à grille fluide

 

 

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 est affiché (on parle de responsive design). Une mise en page à 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 en savoir plus : Mise en page adaptative ou Mise en page en responsive design

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

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

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

En effet, dans Dreamweaver 2017, vous devez utiliser bootstrap pour créer des mises en page en responsive design. 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 périphérique, définissez la valeur de votre choix.

  3. Pour définir la largeur d'une page par rapport à la taille de l'écran, définissez 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 de 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 périphériques, 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 comme é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 à bloquer. (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).

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?