Comment ajouter des éléments fluides à une mise en page dans Dreamweaver - des mannequins

Après avoir créé une disposition de grille fluide dans Dreamweaver, l'étape suivante consiste à ajouter des balises ou d'autres éléments. Vous avez deux options lorsque vous concevez des pages dans Dreamweaver CC: utilisez des balises ou utilisez des balises HTML5.

Les deux fonctionnent de manière similaire dans ces mises en page fluides, mais l'utilisation de balises HTML5, telles que les balises et, présente un certain avantage, car les balises ajoutent une signification et une structure supplémentaires à votre page Web.

Pour ajouter des balises, des balises HTML5 et d'autres éléments à une disposition de grille fluide, suivez ces instructions:

1. Choisissez Insérer → Structure → Navigation.

   Vous pouvez également cliquer sur Navigation dans le panneau Insertion de structure.

2. Cochez la case Insérer en tant qu'élément fluide dans la boîte de dialogue Insérer.

   Lorsque vous utilisez les fonctions de mise en page de la grille fluide, vous devez sélectionner cette option lorsque vous ajoutez des balises.

   

3. Dans la boîte de dialogue Insérer, indiquez si vous souhaitez utiliser le sélecteur de classe ou d'ID pour créer un nouveau style pour le tag que vous insérez, puis entrez un nom pour le nouveau style.

   Même lorsque vous insérez des balises HTML5, vous devez créer un style de classe ou d'ID correspondant qui peut être utilisé pour mettre en forme l'élément dans les trois mises en page.

   Les noms de style de classe doivent commencer par un point (.) Et les noms de style ID doivent commencer par le signe dièse (#).

4. Cliquez sur OK.

   L'étiquette est ajoutée à la mise en page, formant une nouvelle boîte dans la mise en page, et le nom de style correspondant est ajouté trois fois à la mise en page CSS.

5. Sélectionnez la balise initiale incluse dans la mise en page, puis cliquez sur l'icône de la petite corbeille qui apparaît en bas à droite de la balise pour la supprimer.

   Bien que vous puissiez conserver l'étiquette initiale dans les dispositions de grille fluides, vous pouvez également renommer le style qui lui est appliqué.

6. Choisissez Insérer → Structure → Article.

   La boîte de dialogue Insérer un article s'ouvre (similaire à la boîte de dialogue Insérer un en-tête).

7. Cochez la case Insérer en tant qu'élément fluide dans la boîte de dialogue Insérer.

8. Dans la boîte de dialogue Insérer, indiquez si vous souhaitez utiliser le sélecteur de classe ou d'ID pour créer un nouveau style pour le tag que vous insérez et entrez un nom pour le nouveau style.

9. Cliquez sur OK.

   L'étiquette est ajoutée à la mise en page, formant une nouvelle boîte dans la mise en page, et le nom de style correspondant est ajouté trois fois à la mise en page CSS.

10. Ajoutez autant d'éléments que vous le souhaitez pour votre mise en page en répétant les étapes 6 à 9.

    Vous pouvez ajouter des éléments HTML5 à la disposition de la grille fluide en cliquant sur les icônes correspondantes dans le panneau Insertion de la structure: une navigation, un en-tête, deux articles et un pied de page .

    Notez que dans le code, Dreamweaver ajoute le préfixe fluide- au nom de chaque style que vous créez pour vos dispositions de grille fluide.