Comment créer une seule colonne grille de mise en page fluide dans Dreamweaver

Avant de vous plonger dans la création d'une conception de la grille fluide compliquée dans Dreamweaver, envisager d'essayer un plus simple. Commencez par créer un une colonne grille de fluide mise en page simple, suite à ces instructions simples:

  1. Choisissez Fichier-Nouveau.

    La fenêtre Nouveau document ouvre. Note: Assurez-vous que vous avez terminé le processus de configuration du site avant de commencer à travailler sur une nouvelle disposition de la grille fluide.

  2. Du côté gauche de l'écran, sélectionnez Grille Fluid Disposition.

    Les options de la fenêtre Nouveau document changer les options de la grille des fluides.

    image0.jpg
  3. Spécifiez le nombre de colonnes que vous voulez dans chacun des trois modèles.

    Pour ajouter ou supprimer des colonnes, sélectionnez le champ de texte sur chaque colonne à son tour et entrez le nombre de colonnes que vous voulez.

  4. Spécifiez le pourcentage de la fenêtre du navigateur que vous voulez chaque mise à couvrir.

    Sélectionnez le champ de texte ci-dessous chaque mise à son tour et entrez un numéro représentant le pourcentage d'espace que vous voulez que la disposition pour couvrir lorsque la conception est affichée dans une fenêtre de navigateur. Par exemple, par défaut, la disposition du bureau est réglée à prendre 90 pour cent de l'espace disponible, mais vous pouvez le modifier à 95 pour cent pour vous donner plus d'espace de conception et de réduire l'espace de la marge.




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

    Par défaut, Dreamweaver définit chaque marge à prendre en hausse de 25 pour cent de l'espace disponible.

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

    Par défaut, les layouts de la grille de fluide sont créés en utilisant le doctype HTML5. Sauf si vous avez besoin de changer le doctype à être plus compatible avec d'autres formatage utilisé dans votre site web, HMTL5 est l'option recommandée pour la conception Web sensibles.

  7. Cliquez sur Créer.

    La boîte de dialogue Enregistrer sous apparaît prêt à enregistrer un fichier CSS.

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

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

    Note: Contrairement au processus de création d'autres types de pages dans Dreamweaver, le fichier CSS est d'abord enregistré et le fichier HTML est enregistré dans une étape ultérieure.

  9. Choisissez Fichier-Save

    La boîte de dialogue Enregistrer sous apparaît.

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

    La boîte de dialogue Enregistrer sous se ferme et un avis apparaît dans Dreamweaver vous informant que votre configuration de la grille fluide nécessite deux fichiers supplémentaires: boilerplate.css et respond.min.js.

  11. Cliquez sur OK pour copier les fichiers de boilerplate.css et respond.min.js au dossier de votre site.

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

    image1.jpg
  12. Donner à la page un titre en entrant du texte dans le champ Titre en haut de l'espace de travail.

Et qui complète le processus de création d'un nouvel ensemble de fichiers pour votre configuration de la grille fluide.


» » » » Comment créer une seule colonne grille de mise en page fluide dans Dreamweaver