Pour créer une disposition de grille fluide en une colonne dans Dreamweaver - avant le lancement de

Avant de vous lancer dans la création d'une grille fluide compliquée dans Dreamweaver, envisagez d'en choisir une plus simple. Commencez par créer une mise en page fluide, à une colonne, en suivant ces instructions simples:

1. Choisissez Fichier → Nouveau.

   La fenêtre Nouveau document s'ouvre. Remarque: Assurez-vous d'avoir terminé le processus de configuration du site avant de commencer à travailler sur une nouvelle disposition de la grille fluide.

2. Dans la partie gauche de l'écran, sélectionnez Disposition de la grille fluide.

   Les options de la fenêtre Nouveau document sont remplacées par les options de la grille fluide.

   

3. Spécifiez le nombre de colonnes souhaité dans chacune des trois dispositions.

   Pour ajouter ou supprimer des colonnes, sélectionnez successivement le champ de texte sur chaque colonne et entrez le nombre de colonnes souhaité.

4. Spécifiez le pourcentage de la fenêtre du navigateur que vous souhaitez couvrir.

   Sélectionnez à tour de rôle le champ de texte sous chaque mise en page et entrez un nombre représentant le pourcentage d'espace que vous souhaitez que la mise en page recouvre lorsque le motif est affiché dans une fenêtre de navigateur. Par exemple, par défaut, la disposition du bureau est définie pour occuper 90% de l'espace disponible, mais vous pouvez le modifier à 95% pour vous donner plus d'espace de dessin et réduire l'espace de marge.

5. Modifier le pourcentage de largeur de colonne pour modifier la quantité d'espace de marge entre chaque colonne.

   Dreamweaver définit par défaut chaque marge pour occuper 25% de l'espace disponible.

6. Utilisez la liste déroulante pour spécifier un doctype.

   Par défaut, les mises en page de grille fluides sont créées à l'aide du doctype HTML5. À moins que vous ne deviez modifier le doctype pour le rendre plus compatible avec d'autres formats utilisés sur votre site Web, HMTL5 est l'option recommandée pour les conceptions Web réactives.

7. Cliquez sur Créer.

   La boîte de dialogue Enregistrer sous s'ouvre pour enregistrer un fichier CSS.

8. Entrez un nom pour votre fichier CSS et cliquez sur Enregistrer.

   Un nouveau fichier HTML s'ouvre dans l'espace de travail Dreamweaver, mais n'est pas encore enregistré. Le fichier CSS que vous avez nommé est enregistré et son nom devient visible dans le panneau Fichiers.

   Remarque: Contrairement au processus de création d'autres types de pages dans Dreamweaver, le fichier CSS est enregistré en premier et le fichier HTML est enregistré ultérieurement.

9. Choisissez Fichier → Enregistrer

   La boîte de dialogue Enregistrer sous s'ouvre.

10. Entrez un nom pour votre fichier HTML, puis cliquez sur OK.

    La boîte de dialogue Enregistrer sous se ferme et une notification s'affiche dans Dreamweaver pour vous informer que la disposition de la grille fluide nécessite deux fichiers supplémentaires: la règle standard. css et répondez. min. js.

11. Cliquez sur OK pour copier le passe-partout.css et répondez. min. js fichiers dans votre dossier de site.

    Les trois fichiers sont ajoutés au panneau Fichiers et vous revenez à votre nouveau fichier HTML ouvert dans l'espace de travail Dreamweaver.

    

12. Attribuez un titre à la page en saisissant du texte dans le champ Titre situé en haut de l'espace de travail.

Et cela termine le processus de création d'un nouvel ensemble de fichiers pour votre mise en page fluide de la grille.