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