Vidéo: Lier sa feuille de style à sa page HTML 2025
Les utilisateurs de Dreamweaver peuvent facilement insérer une balise de lien vers une feuille de style en cascade (CSS) externe sans avoir à mémoriser tout le code requis ou la bonne syntaxe. De plus, lors de la création de liens vers un fichier CSS externe dans Dreamweaver, vous pouvez également utiliser cette opportunité pour sélectionner un type de média CSS, si vous le souhaitez.
Dans les étapes suivantes, vous apprendrez comment lier un fichier CSS externe à tous les types de média à un fichier HTML ouvert dans Dreamweaver.
Pour compléter toutes les étapes, vous avez besoin de Dreamweaver avec des exemples de fichiers HTML et CSS que vous pouvez créer rapidement vous-même.
Placez les deux copies des fichiers enregistrés dans un dossier sur votre ordinateur, puis procédez comme suit:
-
Lancez Dreamweaver et configurez un site géré en sélectionnant Site → Nouveau site.
La boîte de dialogue Configuration du site s'affiche, affichant la catégorie Site, qui affiche les champs du nom du site et du dossier du site local.
-
Dans le champ Nom du site, entrez le nom de votre site.
Entrez un nom qui correspond au nom du client ou indique que le but de votre site est le meilleur, par exemple ABC Company ou My Blog.
-
Dans le champ Dossier de site local, vérifiez que le chemin pointe vers le dossier sur votre ordinateur que vous souhaitez utiliser pour ce site.
Par exemple, si vous avez un dossier sur votre ordinateur dédié aux sites Web locaux et que vous voulez créer un dossier pour héberger les fichiers d'un nouveau site Web ABC, le chemin de votre dossier de site local peut ressembler à ceci: <
Cliquez sur Enregistrer pour fermer la boîte de dialogue.
-
Votre nouveau site géré s'ouvre, affichant tous les fichiers et dossiers existants (le cas échéant) dans le dossier racine du panneau Fichiers.
Dans le panneau Fichiers, ouvrez le fichier HTML auquel vous allez ajouter le lien CSS.
-
Le fichier que vous utilisez doit avoir un certain type à l'intérieur et être marqué avec le paragraphe, h1, et les balises de liste.
Pour ajouter le lien, cliquez sur l'icône Attacher une feuille de style (qui ressemble à un petit bout de chaîne) en bas du panneau Styles CSS.
-
Cliquez sur l'icône pour ouvrir la boîte de dialogue Attacher une feuille de style externe. Si le panneau Styles CSS n'apparaît pas dans l'espace de travail Dreamweaver, choisissez Fenêtre → Styles CSS pour l'ouvrir.
Dans le champ de texte Fichier / URL, tapez le nom du fichier CSS que vous souhaitez lier ou cliquez sur le bouton Parcourir pour rechercher et sélectionner le fichier CSS souhaité.
-
Si vous utilisez les exemples de fichiers que vous venez de télécharger sur le Web, cliquez sur le bouton Parcourir pour accéder à l'emplacement où vous avez enregistré les fichiers d'exemple et sélectionnez le fichier cssdemo.css.
Dans la zone Ajouter en tant que de la boîte de dialogue, cliquez sur le bouton radio Liaison ou Importer pour sélectionner la méthode souhaitée pour ajouter le fichier CSS à votre page HTML.
-
L'option Link ajoute le CSS en tant que fichier externe en utilisant la balise:
L'option Import spécifie le CSS externe dans un lien de style dans la tête de la page en utilisant la @import at-rule. Gardez à l'esprit que cette méthode n'est pas recommandée pour les requêtes de média CSS3:
Dans la zone de menu déroulant Média, tapez le mot tout, ou cliquez sur la flèche vers le bas du menu et sélectionnez tout le type de média.
-
Pour spécifier plusieurs types de support plutôt qu'un seul, entrez le nom de chacun des types de média souhaités, séparés par des virgules et sans espaces, comme dans screen, print, tty.
Si vous le souhaitez, cliquez sur le bouton Aperçu de la boîte de dialogue pour voir comment le fichier CSS nouvellement lié stylise votre exemple de fichier HTML.
-
Cliquez sur OK pour terminer la pièce jointe du fichier CSS externe.
-
Le panneau Styles CSS de Dreamweaver affiche désormais le fichier CSS nouvellement joint et répertorie tous les styles qu'il contient, et l'exemple de fichier HTML est stylisé avec les règles de style du fichier CSS lié.
