Créez une page Web.
Dernière mise à jour le
27 avr. 2021
Vous pouvez utiliser des requêtes multimédias pour spécifier des fichiers CSS suivant les caractéristiques indiquées pour un appareil (conception réactive). Le navigateur d'un appareil vérifie la requête multimédia puis utilise le fichier CSS correspondant pour afficher la page Web.
Par exemple, la requête multimédia suivante spécifie le fichier phone.css pour les appareils faisant de 300 à 320 pixels de large.
<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 320px)">
Pour une présentation approfondie des requêtes de médias, consultez l'Articles de Don Booth sur Adobe Developer Center www.adobe.com/go/learn_dw_medquery_don_en.
Pour plus d'informations sur les requêtes de médias du W3C, consultez www.w3.org/TR/css3-mediaqueries/.
Création d’une requête multimédia
Dans Dreamweaver, vous pouvez créer un fichier de requête de médias à l'échelle du site ou une requête de médias spécifique au document.
Fichier de requête de médias à l'échelle du emplacement
Spécifie les Paramètres d'affichage pour toutes les pages de votre emplacement qui incluent le fichier.
Le fichier de requête de médias à l'échelle du emplacement agit comme référentiel central pour toutes les requêtes de médias de votre emplacement.Après avoir créé ce fichier, créez un lien vers celui-ci à partir des pages de votre emplacement qui doivent utiliser les requêtes de médias du fichier pour leur affichage.
Requête de médias spécifique au document
La requête de médias est insérée directement dans le document et la page s'affiche selon la requête de médias insérée.
Choisissez Modifier > Requêtes multimédias.
Effectuez l'une des opérations suivantes :
Pour créer un fichier de requêtes de médias à l'échelle du site, sélectionnez Fichier de requêtes de médias à l'échelle du site.
Pour créer une requête multimédia propre au document, sélectionnez Ce document.
Pour une requête multimédia à l'échelle du site, procédez comme suit :
Cliquez sur Spécifier.
Sélectionnez Créer un nouveau fichier.
Indiquez le nom du fichier et cliquez sur OK.
Il est possible que certains appareils ne signalent pas leur largeur réelle.Pour forcer les appareils à signaler leur largeur réelle, assurez-vous que l'option Forcer les appareils à signaler la largeur réelle est activée.
Le code suivant est inséré dans votre fichier lorsque vous choisissez cette option.
<meta name="viewport" content="width=device-width">
Effectuez l’une des tâches suivantes :
Cliquez sur « + » pour définir les propriétés du fichier de requête média.
Cliquez sur Paramètres prédéfinis par défaut si vous souhaitez commencer avec des paramètres prédéfinis standard.
Sélectionnez les lignes du tableau et modifiez leurs propriétés à l'aide des options sous Propriétés.
Description
Description de l'appareil pour lequel le fichier CSS doit être utilisé.Par exemple, téléphone, téléviseur, tablette, etc.
Largeur min et Largeur max
Le fichier CSS est utilisé pour les appareils dont la largeur communiquée figure dans la plage de valeurs spécifiées.
Annotation
laissez la valeur Largeur min ou Largeur max vide si vous ne souhaitez pas spécifier une plage explicite pour un appareil. Par exemple, il est courant de laisser Largeur min vide si vous travaillez pour des téléphones, qui font 320px de large ou moins.
Fichier CSS
Sélectionnez Utiliser un fichier existant, puis recherchez le fichier CSS de l'appareil.
Si vous souhaitez spécifier un fichier CSS que vous n'avez pas encore créé, sélectionnez Créer un nouveau fichier.Entrez le nom du fichier CSS.Le fichier est créé lorsque vous cliquez sur le bouton OK.
Cliquez sur OK.
Pour une requête multimédia à l’échelle du site, un nouveau fichier est créé. Enregistrez-le.
Requête de médias à l'échelle du emplacement : pour les pages existantes, assurez-vous d'inclure le fichier de requête de médias dans toutes les pages de la balise <head>.
Exemple de lien de requête multimédia où mediaquery_adobedotcom.css est le fichier de requête multimédia à l'échelle du site pour l'emplacement www.adobe.com:
<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
Utilisation d’un fichier de requêtes multimédias existant
Créez une page ou ouvrez une page existante.
Choisissez Modifier > Requêtes multimédias.
Choisissez Fichier de requêtes multimédias à l'échelle du site.
Cliquez sur Spécifier.
Sélectionnez Utiliser un fichier existant si vous avez déjà créé un fichier CSS avec la requête multimédia.
Cliquez sur l’icône Parcourir pour atteindre le fichier et le spécifier. Cliquez sur OK.
Choisissez Fichier de requêtes multimédias à l'échelle du site.
Pour que les appareils signalent leur largeur réelle, vérifiez que l'option Forcer les appareils à signaler la largeur réelle est activée.Le code suivant est inséré dans votre fichier lorsque vous choisissez cette option.
<meta name="viewport" content="width=device-width">
Cliquez sur OK.
Choisir un autre fichier de requête média à l'échelle du site
Utilisez cette procédure pour modifier le fichier de requêtes multimédias à l'échelle du site que vous avez défini dans la boîte de dialogue Requêtes multimédias.
Choisissez Site > Gérer les sites.
Dans la boîte de dialogue Gérer les sites, sélectionnez votre site.
Cliquez sur Edition. La boîte de dialogue Configuration du site s'affiche.
Sous Paramètres avancés dans le panneau de gauche, sélectionnez Infos locales.
Dans Fichier de requête multimédia à l'échelle du site dans le panneau de droite, cliquez sur Parcourir pour sélectionner le fichier CSS de requête multimédia.
Annotation
La modification du fichier de requêtes multimédias à l'échelle du site n'affecte pas les fichiers document liés à un autre fichier de requête multimédia à l'échelle du site ou précédent.
Cliquez sur Enregistrer.
Afficher les pages web en fonction de la requête multimédia
Les dimensions spécifiées dans une requête multimédia apparaissent dans les options pour la taille du bouton/de la fenêtre Multi-écrans. Lorsque vous sélectionnez une dimension dans le menu, les modifications suivantes s'affichent :
La taille de l’affichage change pour refléter les dimensions spécifiées. La taille du cadre du document n'est pas modifiée.
Le fichier CSS spécifié dans la requête multimédia est utilisé pour afficher la page.
Articles connexes
Créez de magnifiques sites web dans Dreamweaver
Concevez, codez et gérez des sites web dynamiques dans un puissant outil tout-en-un.
