Guide d'utilisation Annuler

À propos de l’utilisation de CSS pour mise en forme de votre page

  1. Guide de l’utilisateur de Dreamweaver
  2. Introduction
    1. Principes de base du design web réactif
    2. Nouveautés de Dreamweaver
    3. Développement web avec Dreamweaver - Présentation
    4. Dreamweaver / Questions fréquentes
    5. Raccourcis clavier
    6. Configuration requise pour Dreamweaver
    7. Récapitulatif des nouvelles fonctionnalités
  3. Dreamweaver et Creative Cloud
    1. Synchronisation des paramètres de Dreamweaver avec Creative Cloud
    2. Bibliothèques Creative Cloud dans Dreamweaver
    3. Utilisation de fichiers Photoshop dans Dreamweaver
    4. Utilisation d’Adobe Animate avec Dreamweaver
    5. Extraction de fichiers SVG optimisés pour le web depuis des Bibliothèques
  4. Espaces de travail et affichages Dreamweaver
    1. Espace de travail de Dreamweaver
    2. Optimisation de l’espace de travail Dreamweaver pour la conception visuelle
    3. Recherche de fichiers sur la base de leur nom ou de leur contenu | Mac OS
  5. Configuration de sites
    1. À propos des sites Dreamweaver
    2. Création d’une version locale de votre site
    3. Connexion à un serveur de publication
    4. Configuration d’un serveur d’évaluation
    5. Importation et exportation des paramètres d’un site Dreamweaver
    6. Importation de sites web d’un serveur distant vers la racine de votre site local
    7. Fonctions d’accessibilité dans Dreamweaver
    8. Paramètres avancés
    9. Définition des préférences de site pour le transfert de fichiers
    10. Indication des paramètres du serveur proxy dans Dreamweaver
    11. Synchronisation des paramètres de Dreamweaver avec Creative Cloud
    12. Utilisation de Git dans Dreamweaver
  6. Gestion des fichiers
    1. Création et ouverture de fichiers
    2. Gestion des fichiers et des dossiers
    3. Acquisition et placement de fichiers depuis ou vers votre serveur
    4. Archivage et extraction de fichiers
    5. Synchronisation de fichiers
    6. Comparaison de fichiers pour analyse de leurs différences
    7. Masquage de fichiers et de dossiers dans votre site Dreamweaver
    8. Activation des notes de conception pour les sites Dreamweaver
    9. Prévention de l’exploitation potentielle de Gatekeeper
  7. Mise en page et design
    1. Utilisation d’assistances visuelles pour la mise en forme
    2. À propos de l’utilisation de CSS pour mise en forme de votre page
    3. Création de sites web en responsive design avec Bootstrap
    4. Création et utilisation des requêtes de multimédia dans Dreamweaver
    5. Présentation de contenus dans des tableaux
    6. Couleurs
    7. Design réactif à l’aide de mises en forme à grille fluide
    8. Extract dans Dreamweaver
  8. CSS
    1. Description des feuilles de style en cascade
    2. Mise en forme de pages avec CSS Designer
    3. Utilisation de préprocesseurs CSS dans Dreamweaver
    4. Comment définir les préférences de Style CSS dans Dreamweaver
    5. Déplacement des règles CSS dans Dreamweaver
    6. Conversion de code CSS intégré en règle CSS dans Dreamweaver
    7. Utilisation de balises div
    8. Application de dégradés à l’arrière-plan
    9. Permet de créer et modifier des effets de transition CSS3 dans Dreamweaver.
    10. Formatage du code
  9. Contenu de page et actifs
    1. Définition des propriétés de page
    2. Définition des propriétés d’en-tête CSS et des propriétés de lien CSS
    3. Utilisation du texte
    4. Recherche et remplacement de texte, de balises et d’attributs
    5. Panneau DOM
    6. Modification en mode En direct
    7. Le codage de documents dans Dreamweaver
    8. Sélection et affichage d’éléments dans la fenêtre de document
    9. Définition des propriétés de texte dans l’inspecteur Propriétés
    10. Vérification de l’orthographe d’une page web
    11. Utilisation de règles horizontales dans Dreamweaver
    12. Ajout et modification de combinaisons de polices dans Dreamweaver
    13. Utilisation d’actifs
    14. Insertion et mise à jour des dates dans Dreamweaver
    15. Création et gestion des actifs favoris dans Dreamweaver
    16. Insertion et modification d’images dans Dreamweaver
    17. Ajout d’objets multimédias
    18. Ajout de vidéos dans Dreamweaver
    19. Insertion de vidéo HTML5
    20. Insertion de fichiers SWF
    21. Ajout d’effets audio
    22. Insertion de fichiers audio HTML5 dans Dreamweaver
    23. Utilisation d’éléments de bibliothèque
    24. Utilisation de texte arabe et hébreu dans Dreamweaver
  10. Liens et navigation
    1. A propos des liens et de la navigation
    2. Etablissement de liens
    3. Cartes graphiques
    4. Résolution des problèmes de liens
  11. Effets et widgets jQuery
    1. Utilisation de widgets jQuery UI et Mobile dans Dreamweaver
    2. Utilisation d’effets jQuery dans Dreamweaver
  12. Codage de sites web
    1. À propos du codage dans Dreamweaver
    2. Environnement de codage dans Dreamweaver
    3. Définition des préférences de codage
    4. Personnalisation de la coloration du code
    5. Rédaction et modification de code
    6. Conseils et remplissage de code
    7. Réduction et développement de code
    8. Réutilisation de code à l’aide de fragments
    9. Analyse linting de code
    10. Optimisation du code
    11. Modification de code en mode Création.
    12. Utilisation de contenu d’en-tête pour les pages
    13. Insertion d’inclusions côté serveur dans Dreamweaver
    14. Utilisation des bibliothèques de balises dans Dreamweaver
    15. Importation de balises personnalisées dans Dreamweaver
    16. Utilisation de comportements JavaScript (instructions générales)
    17. Application de comportements JavaScript intégrés
    18. À propos de XML et de XSLT
    19. Exécution de transformations XSL côté serveur dans Dreamweaver
    20. Exécution de transformations XSL côté client dans Dreamweaver
    21. Ajout d’entités de caractère pour XSLT dans Dreamweaver
    22. Formatage du code
  13. Flux de travaux inter-produit
    1. Installation et utilisation des extensions pour Dreamweaver
    2. Mises à jour intégrées dans Dreamweaver
    3. Insertion de documents Microsoft Office dans Dreamweaver (Windows uniquement)
    4. Utilisation de Fireworks et Dreamweaver
    5. Édition de contenu sur des sites Dreamweaver à l’aide de Contribute
    6. Intégration entre Dreamweaver et Business Catalyst
    7. Création de campagnes de messagerie personnalisées
  14. Modèles
    1. À propos des modèles Dreamweaver
    2. Reconnaissance des modèles et des documents basés sur un modèle
    3. Création d’un modèle Dreamweaver
    4. Création de régions modifiables dans des modèles
    5. Création de régions et de tables modifiables dans Dreamweaver
    6. Utilisation de régions facultatives dans les modèles
    7. Définition d’attributs de balises modifiables dans Dreamweaver
    8. Comment créer des modèles imbriqués dans Dreamweaver
    9. Modification, mise à jour et suppression de modèles
    10. Exportation et importation de contenus xml dans Dreamweaver
    11. Application ou suppression d’un modèle depuis un document existant
    12. Modification de contenu dans les modèles de Dreamweaver
    13. Règles de syntaxe pour les balises de modèle dans Dreamweaver
    14. Définition des préférences de surbrillance pour des régions de modèle
    15. Avantages de l’utilisation de modèles dans Dreamweaver
  15. Terminaux mobiles et écrans multiples
    1. Création de requêtes multimédias
    2. Modification de l’orientation de la page pour les appareils mobiles
    3. Création d’applications web pour appareils mobiles à l’aide de Dreamweaver
  16. Sites dynamiques, pages et formulaires web
    1. En savoir plus sur les applications web
    2. Configuration de l’ordinateur pour le développement d’applications
    3. Résolution des problèmes de connexion aux bases de données
    4. Suppression des scripts de connexion dans Dreamweaver
    5. Conception de pages dynamiques
    6. Présentation des sources de contenu dynamique
    7. Définition de sources de contenu dynamique
    8. Ajout de contenus dynamiques aux pages
    9. Changement des contenus dynamiques dans Dreamweaver
    10. Affichage d’enregistrements d’une base de données
    11. Fourniture et dépannage de données en temps réel dans Dreamweaver
    12. Ajout de comportements de serveur personnalisés dans Dreamweaver
    13. Création de formulaires à l’aide de Dreamweaver
    14. Utilisation de formulaires pour la collecte des informations sur les utilisateurs
    15. Création et activations des formulaires ColdFusion dans Dreamweaver
    16. Création de formulaires web
    17. Prise en charge améliorée de HTML5 pour les éléments de formulaire
    18. Développement d’un formulaire à l’aide de Dreamweaver
  17. Création visuelle d’applications
    1. Création de pages principales et détaillées dans Dreamweaver
    2. Création de pages de recherche et de résultats
    3. Création d’une page d’insertion d’enregistrements
    4. Création de la mise à jour d’une page d’enregistrement dans Dreamweaver
    5. Création de pages de suppression d’enregistrement dans Dreamweaver
    6. Modification d’une base de données à l’aide des commandes ASP dans Dreamweaver
    7. Création d’une page d’enregistrement
    8. Création d’une page de connexion
    9. Création d’une page à accès restreint
    10. Sécurisation de dossiers dans ColdFusion à l’aide de Dreamweaver
    11. Utilisation de composants ColdFusion dans Dreamweaver
  18. Test, aperçu et publication de sites web
    1. Prévisualisation de pages
    2. Aperçu et inspection de pages web Dreamweaver sur plusieurs appareils
    3. Test de votre site Dreamweaver

 

Découvrez la structure de base d’une mise en forme CSS et comment concevoir des pages et leur contenu à l’aide de CSS sous Dreamweaver.

À propos de la mise en page CSS

Une mise en page CSS utilise le format de feuilles de style CSS, au lieu de tables ou de cadres HTML traditionnels, pour organiser le contenu d’une page web. L’élément de base de la mise en forme CSS est la balise div : il s’agit d’une balise HTML qui, la plupart du temps, sert de conteneur pour du texte, des images et d’autres éléments de page. Lorsque vous créez une mise en forme CSS, vous placez des balises div dans la page, leur ajoutez du contenu et les positionnez en différents endroits. À la différence des cellules de tableau, qui ne peuvent exister qu’à l’intérieur de lignes et de colonnes d’un tableau, les balises div peuvent figurer n’importe où sur une page web. Vous pouvez positionner des balises div de façon absolue (en indiquant des coordonnées x et y) ou de façon relative (en spécifiant leur emplacement par rapport à leur position actuelle). Vous pouvez également placer des balises div afin de définir des éléments flottants, des marges intérieures et des marges. Cette méthode est privilégiée dans les normes web modernes.

À propos de la structure de mise en page CSS

Avant de lire cette section, vous devez vous être familiarisé avec les concepts CSS de base.

L’élément de base de la mise en forme CSS est la balise div : il s’agit d’une balise HTML qui, la plupart du temps, sert de conteneur pour du texte, des images et d’autres éléments de page. L’exemple ci-dessous montre une page HTML qui contient trois balises div distinctes : une balise container de grande taille, et deux autres balises (une balise sidebar et une balise main content) situées à l’intérieur de la balise container.

A. Div Container B. Div sidebar C. Div Main Content 

Voici le code correspondant à ces trois balises div dans le code HTML :

<!--container div tag--> 
<div id="container"> 
<!--sidebar div tag--> 
    <div id="sidebar"> 
    <h3>Sidebar Content</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    <p>Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis.</p> 
      </div> 
     
<!--mainContent div tag--> 
    <div id="mainContent"> 
    <h1> Main Content </h1> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum.</p> 
    <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> 
    <h2>H2 level heading </h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.</p> 
    </div> 
</div>

Dans l’exemple ci-dessus, aucun style n’est associé aux balises div. Si aucune règle CSS n’est définie, chaque balise div et son contenu prend un emplacement par défaut sur la page. Toutefois, si chaque balise div possède un ID unique (comme dans l’exemple ci-dessus), vous pouvez utiliser ces identificateurs pour créer des règles CSS qui, une fois appliquées, modifient le style et le positionnement des balises div.

La règle CSS suivante, qui peut résider dans la section head du document ou dans un fichier CSS externe, crée des règles de style pour la première balise div (container) de la page :

#container { 
    width: 780px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
}

La règle #container applique un style à la balise div container qui lui donne une largeur de 780 pixels, un arrière-plan blanc, aucune marge (depuis la gauche de la page), une bordure noire continue de 1 pixel et un texte aligné à gauche. Les résultats de l’application de la règle à la balise div container sont les suivants :

Balise div Container, 780 pixels, pas de marge

A. Texte aligné à gauche B. Arrière-plan blanc C. Bordure noire pleine d’un pixel 

La règle CSS suivante crée des règles de style pour la balise div sidebar :

#sidebar { 
    float: left; 
    width: 200px; 
    background: #EBEBEB; 
    padding: 15px 10px 15px 20px; 
}

La règle #sidebar applique un style à la balise div sidebar qui lui donne une largeur de 200 pixels, un arrière-plan gris, un remplissage haut et bas de 15 pixels, un remplissage droite de 10 pixels et un remplissage gauche de 20 pixels. L’ordre de remplissage par défaut est le suivant : haut, droite, bas, gauche. En outre, la règle positionne la balise div sidebar avec float: left, propriété qui pousse la balise div sidebar vers le côté gauche de la balise div container. Les résultats de l’application de la règle à la balise div sidebar sont les suivants :

Div sidebar, flottante à gauche

A. Largeur de 200 pixels B. Remplissage haut et bas de 15 pixels 

Enfin, la règle CSS pour la balise div container principale termine la mise en forme :

#mainContent { 
    margin: 0 0 0 250px; 
    padding: 0 20px 20px 20px; 
}

La règle #mainContent applique un style à la balise div main qui lui donne une marge gauche de 250 pixels, ce qui correspond à un espace de 250 pixels entre le côté gauche de la balise div container et le côté gauche de la balise div main content. En outre, la règle prévoit 20 pixels d’espacement sur les côtés droit, bas et gauche de la balise div main content. Les résultats de l’application de la règle à la balise div mainContent sont les suivants :

Le code complet ressemble à ce qui suit :

Div main content, marge gauche de 250 pixels

A. Remplissage gauche de 20 pixels B. Remplissage droit de 20 pixels C. Remplissage bas de 20 pixels 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#container { 
    width: 780px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
} 
#sidebar { 
    float: left; 
    width: 200px; 
    background: #EBEBEB; 
    padding: 15px 10px 15px 20px; 
} 
#mainContent { 
    margin: 0 0 0 250px; 
    padding: 0 20px 20px 20px; 
} 
</style> 
</head> 
<body> 
<!--container div tag--> 
<div id="container"> 
    <!--sidebar div tag--> 
    <div id="sidebar"> 
    <h3>Sidebar Content</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    <p>Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis.</p> 
      </div> 
     <!--mainContent div tag--> 
    <div id="mainContent"> 
    <h1> Main Content </h1> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum.</p> 
    <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> 
    <h2>H2 level heading </h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.</p> 
    </div> 
</div> 
</body>
Remarque :

l’exemple de code ci-dessus est une version simplifiée du code qui crée la mise en forme à deux colonnes avec encadré à gauche fixe lorsque vous créez un nouveau document à l’aide des mises en forme prédéfinies fournies avec Dreamweaver.

Création d’une page avec une mise en forme CSS

Lors de la création d’une nouvelle page sous Dreamweaver, vous pouvez en créer une qui contient déjà une mise en forme CSS. Dreamweaver permet de choisir parmi 16 mises en forme CSS. En outre, vous pouvez créer vos propres mises en forme CSS et les ajouter au dossier de configuration pour qu’elles figurent parmi les choix de mise en forme dans la boîte de dialogue Nouveau Document.

Création d’une page avec une mise en forme CSS

  1. Choisissez Fichier > Nouveau.
  2. Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Modèle vierge. Il s’agit de la sélection par défaut.
  3. Pour Type de page, sélectionnez le type de page à créer.
    Remarque :

    vous devez sélectionner un type de page HTML pour la mise en forme. Par exemple, vous pouvez sélectionner HTML, ColdFusion®, PHP, etc. Vous ne pouvez pas créer de page ActionScript™, CSS, Library Item, JavaScript, XML, XSLT ou ColdFusion Component avec une mise en forme CSS. Les types de page de la catégorie Autre dans la boîte de dialogue Nouveau document ne peuvent pas non plus inclure de mises en page CSS.

  4. Pour Mise en forme, sélectionnez la mise en forme CSS à utiliser. Vous pouvez choisir parmi 16 mises en forme différentes. La fenêtre Aperçu montre la mise en forme sélectionnée et en donne une brève description.

    Les mises en forme CSS prédéfinies fournissent les types de colonnes suivants :

    Fixe

    La largeur de colonne est définie en pixels. La colonne n’est pas redimensionnée selon la taille du navigateur ou des paramètres de texte du visiteur du site.

    Liquide

    La largeur de colonne est définie en tant que pourcentage de la largeur du navigateur du visiteur du site. La mise en page s’adapte si le visiteur du site augmente ou diminue la largeur de son navigateur, mais pas en fonction des paramètres de texte définis par le visiteur.

  5. Sélectionnez un type de document dans le menu DocType.
  6. Sélectionnez un emplacement pour le fichier CSS de la mise en forme dans le menu déroulant CSS de mise en forme dans.

    Ajouter à l’en-tête

    Ajoute le code CSS de mise en forme à l’en-tête de la page que vous créez.

    Créer un nouveau fichier

    Ajoute le code CSS de mise en forme à une nouvelle feuille de style CSS externe et associe la nouvelle feuille de style à la page que vous créez.

    Lier au fichier existant

    Permet d’indiquer un fichier CSS existant qui contient déjà les règles CSS requises pour la mise en forme. Cette option est particulièrement utile si vous voulez utiliser la même mise en forme CSS (les règles CSS figurant dans un fichier) dans plusieurs documents.

  7. Effectuez l’une des opérations suivantes :
    • Si vous avez sélectionné Ajouter à l’en-tête dans le menu déroulant CSS de mise en forme dans (l’option par défaut), cliquez sur Créer.
    • Si vous avez sélectionné Créer un nouveau fichier dans le menu déroulant CSS de mise en forme, cliquez sur Créer, puis spécifiez un nouveau nom pour le nouveau fichier externe dans la boîte de dialogue Enregistrer la feuille de style sous.
    • Si vous avez sélectionné Lier au fichier existant dans le menu déroulant CSS de mise en forme dans, ajoutez le fichier externe dans la zone de texte Lier le fichier CSS en cliquant sur l’icône d’ajout de feuille de style, en renseignant la boîte de dialogue Associer feuille de style externe et en cliquant sur OK. Une fois que vous avez terminé, cliquez sur Créer dans la boîte de dialogue Nouveau document.
    Remarque :

    lorsque vous sélectionnez l’option Lier au fichier existant, le fichier que vous spécifiez doit déjà contenir les règles correspondant au fichier CSS.

    Lorsque vous placez le CSS de mise en forme dans un nouveau fichier ou lorsque vous le liez à un fichier existant, Dreamweaver lie immédiatement le fichier à la page HTML que vous créez.

    Remarque :

    les commentaires conditionnels (CC) pour Internet Explorer, qui permettent de contourner les problèmes de rendu dans IE, restent incorporés dans l’en-tête du nouveau document de mise en forme CSS, même si vous sélectionnez « Nouveau fichier externe » ou « Fichier externe existant » en tant qu’emplacement pour votre fichier CSS de mise en forme.

  8. (Facultatif) Vous pouvez également lier des feuilles de style CSS à la nouvelle page (sans rapport avec la mise en forme CSS) lors de la création de cette page. Pour ce faire, cliquez sur l’icône Ajouter une feuille de style au-dessus du volet Lier le fichier CSS, puis sélectionnez une feuille de style CSS.

    Vous trouverez une description détaillée de ce processus dans l’article de David Powers, Automatically attaching a style sheet to new documents (en anglais).

Ajout de mises en forme CSS personnalisées à la liste de choix

  1. Créez une page HTML contenant la mise en forme CSS que vous souhaitez ajouter à la liste de choix de la boîte de dialogue Nouveau document. Le fichier CSS correspondant à la mise en forme doit résider dans la section head de la page HTML.
    Remarque :

    Pour uniformiser votre mise en forme CSS personnalisée avec les autres mises en forme fournies avec Dreamweaver, vous devez enregistrer votre fichier HTML avec une extension .htm.

  2. Ajoutez la page HTML au dossier Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts.
  3. (Facultatif) Ajoutez une image d’aperçu de votre mise en forme (par exemple, un fichier .gif ou .png) au dossier Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts. Les images par défaut fournies avec Dreamweaver sont des fichiers PNG de 227 pixels de large x 193 pixels de haut.
    Remarque :

    Donnez à votre image d’aperçu le même nom de fichier que votre fichier de façon à pouvoir l’identifier facilement. Par exemple, si votre fichier HTML est nommé myCustomLayout.htm, appelez votre image d’aperçu myCustomLayout.png.

  4. (Facultatif) Créez un fichier de notes pour votre mise en forme personnalisée en ouvrant le dossier Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes, en copiant et en collant les fichiers de notes existants dans le même dossier, et en renommant la copie en fonction de votre mise en forme personnalisée. Par exemple, vous pouvez copier le fichier oneColElsCtr.htm.mno et le renommer myCustomLayout.htm.mno.
  5. (Facultatif) Après avoir créé un fichier de notes pour votre mise en forme personnalisée, vous pouvez ouvrir le fichier et spécifier le nom de la mise en forme, sa description et une image d’aperçu.

 Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?