Cliquez sur la barre de requête de médias visuelle qui correspond à la requête de médias que vous souhaitez modifier.
Dernière mise à jour le
20 déc. 2021
Grâce à l’outil Requêtes multimédias visuelles, vous pouvez visualiser et modifier vos pages web à différents points d’arrêt, qui représentent chacun une taille d’écran.
Le module CSS3 Requêtes multimédias vous permet de créer des sites web réactifs en définissant différentes règles de style en fonction des appareils ou des types de supports utilisés. D'après ces règles, le contenu est généré pour s'adapter à diverses conditions, telles que les dimensions d'écran, les dimensions de fenêtre du navigateur, les dimensions et l'orientation des appareils, ainsi que la résolution.
Pour ajouter des requêtes multimédias à votre code CSS, vous pouvez utiliser la règle @media. Vous pouvez également créer des feuilles de style distinctes pour différents types de médias, puis les appeler à l'aide de la syntaxe suivante :
<link rel='stylesheet' media='all' href='normal.css' />
<link rel='stylesheet' media='print' href='print.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css' />
Le navigateur d'un appareil vérifie la requête multimédia puis utilise le fichier CSS correspondant pour afficher la page Web.
Pour plus d’informations, consultez cet article.
Vous pouvez créer des requêtes multimédias en ajoutant le code correspondant dans vos fichiers HTML ou CSS. Par ailleurs, Dreamweaver vous permet de créer et de gérer facilement les requêtes de médias à l'aide de :
Ces deux méthodes diffèrent principalement par leur aspect visuel. Si vous préférez modifier le code, puis prévisualiser les modifications en mode En direct, utilisez CSS Designer. Si vous préférez visualiser votre page à différents points d’arrêt pendant que vous apportez les modifications souhaitées, la barre de requêtes multimédias visuelles devrait mieux vous convenir.Barres de requêtes multimédias visuelles
Les barres de requêtes multimédias visuelles constituent une représentation visuelle des requêtes multimédias présentes sur une page. Ces barres vous permettent de visualiser votre page Web à différents points d’arrêt et de voir comment chaque composant de la page est repositionné dans les différentes fenêtres d’affichage. Lorsque vous affichez votre page dans différentes fenêtres, vous pouvez apporter des modifications spécifiques à l’une de ces fenêtres d’affichage sans que cela ne change l’aspect de la page dans les autres fenêtres.
L’outil Requêtes multimédias virtuelles se compose de trois barres horizontales, représentant chacune une catégorie de requêtes multimédias :
Vert : requêtes de médias avec conditions max-width
Bleu : requêtes de médias avec conditions min-width et max-width
Violet : requêtes de médias avec conditions min-width
Les requêtes de médias répertoriées dans le panneau du concepteur CSS sont également préfixées par ces couleurs.
Chaque catégorie peut comporter une ou plusieurs requêtes multimédias. Si une condition de requête multimédia n’est pas définie dans le document, la barre de requêtes multimédias visuelles correspondante ne sera pas affichée. Par exemple, si le document ne contient pas de conditions min-width, la barre violette ne s'affiche pas.
Les valeurs de point d'arrêt sont indiquées sur les barres : min-width à gauche et max-width à droite de la barre.
A. Points d’arrêt B. Barres de requêtes multimédias visuelles C. Icône Ajouter une requête multimédia D. Scrubber
Masquer ou afficher les requêtes de médias visuelles
Par défaut, la barre de requêtes multimédias visuelles est visible en mode En direct. Pour masquer la barre, utilisez l'option Activer/désactiver la barre de requêtes de médias visuelles dans la barre d'outils.
Basculer entre les points d'arrêt
Pour afficher votre page dans un format spécifique (point d’arrêt), cliquez sur la barre de requêtes multimédias correspondante. Le document se cale sur le point d'arrêt.
Vous pouvez également faire glisser le curseur vers le point d'arrêt requis.
Pour redimensionner la vue selon la taille de la fenêtre du document Dreamweaver, effectuez l'une des actions suivantes :
- Double-cliquez n’importe où dans la zone grise à droite du document, qui contient la mention « Double-cliquez pour ajuster à la largeur ». Si la zone grise n'est pas visible, faites glisser le curseur vers la gauche.
- Sélectionnez l'option Largeur totale dans la liste déroulante au bas de la fenêtre du document.
Si vous ne voyez pas cette option, faites glisser le curseur pour diminuer la taille de la page web.
Modifier visuellement les requêtes de médias
Des poignées de redimensionnement apparaissent. Pour les requêtes multimédias qui ont à la fois des valeurs min et max-width, les poignées de redimensionnement apparaissent des deux côtés de la barre.
Faites glisser les poignées jusqu'à la taille souhaitée.
Les requêtes multimédias sont automatiquement mises à jour selon les nouvelles valeurs min-width et/ou max-width. Une notification s’affiche pour confirmer que la requête multimédia a été modifiée. Si la barre de requêtes multimédias visuelles comporte plusieurs requêtes multimédias, celles-ci sont toutes mises à jour. Le nombre de requêtes de médias qui ont été mises à jour s'affiche avec le message de réussite.
Pour annuler, appuyez sur Ctrl+Z (Win) ou Cmd+Z (Mac).
Vous pouvez également double-cliquer sur les valeurs de point d'arrêt pour saisir les valeurs avec votre clavier.
Ajouter de nouvelles requêtes multimédias
Faites glisser le curseur le long de la règle vers la taille requise.
Cliquez sur 
.
Dans la fenêtre contextuelle qui apparaît, l’option max-width est sélectionnée par défaut. Pour spécifier min-width ou min-max, sélectionnez l'option appropriée dans la liste déroulante et sélectionnez les unités requises.
Ensuite, sélectionnez une source CSS dans laquelle la requête multimédia doit être ajoutée.
Si vous choisissez de créer un nouveau fichier CSS, une autre fenêtre contextuelle s’affiche. Spécifiez le nom et le chemin d'accès du nouveau fichier CSS et cliquez sur OK.
Pour annuler, appuyez sur Ctrl+Z (Win) ou Cmd+Z (Mac).
Supprimer les requêtes multimédias
Cliquez avec le bouton droit sur la barre de requête multimédia visuelle correspondante.
Cliquez sur Supprimer, puis cliquez sur la requête multimédia que vous voulez supprimer.
Cliquez sur OK pour confirmer que vous voulez supprimer toutes les requêtes multimédias et les sélecteurs associés.
Pour annuler, appuyez sur Ctrl+Z (Win) ou Cmd+Z (Mac).
Affichage du code des requêtes multimédias
Cliquez avec le bouton droit sur la barre de requête multimédia visuelle requise et passez votre souris sur Aller au code.
Une liste de toutes les requêtes multimédias dans cette plage de point d'arrêt particulière avec les fichiers dans lesquels elles sont déclarées apparaît.
Cliquez sur la requête multimédia souhaitée pour accéder au code correspondant dans la vue Code.
Si l'affichage Code n'est pas visible, le document passe en affichage Fractionné pour afficher le code.
Créez de magnifiques sites web dans Dreamweaver
Concevez, codez et gérez des sites web dynamiques dans un puissant outil tout-en-un.
