Création de requêtes multimédias personnalisées dans Dreamweaver - duos

Lorsque vous créez des pages à l'aide de fonctions de mise en page fluide, Dreamweaver crée automatiquement les requêtes média correspondantes. mais vous pouvez créer vos propres requêtes média personnalisées et les utiliser pour cibler vos propres règles CSS.

Les requêtes multimédias sont utilisées sur le Web depuis plus d'une décennie pour d'autres utilisations, telles que la création d'une conception de page alternative optimisée pour l'impression. Une requête multimédia est composée d'un type de média, tel que screen ou print (les deux les plus courants), et d'une expression optionnelle qui vérifie des caractéristiques particulières, telles que la hauteur ou la largeur. Les types de médias les plus couramment utilisés sont

• tout: Convient à tous les périphériques

• Imprimer: Conçu pour l'aperçu avant impression et pour l'affichage lorsqu'une page est imprimée

• : Pour le contenu affiché sur tout écran

Le type de support est presque jamais utilisé et était mieux utilisé seulement pour les téléphones cellulaires et autres appareils avec de petits écrans, une bande passante limitée et des affichages monochromes qui ne prennent en charge que les graphiques bitmap. Les appareils iOS et la plupart des smartphones sont catégorisés comme des types de média d'écran.

Application de styles à vos conceptions de page Dreamweaver

Vous pouvez appliquer des feuilles de style en tant que fichiers externes en les liant ou en les important, ou vous pouvez les inclure en tant que styles internes dans la zone principale de votre page. code HTML de la page. Vous pouvez même cibler des périphériques en utilisant des styles en ligne - une option pratique si vous souhaitez appliquer une règle spécifique uniquement à certains périphériques.

Vous pouvez utiliser une combinaison de ces options, et vous pouvez importer ou lier plusieurs feuilles de style externes à la même page Web. Après avoir défini le type de support avec les fonctions de support que vous souhaitez cibler, vous spécifiez comment les styles doivent être appliqués à la page.

Comment utiliser les requêtes multimédia dans des feuilles de style externes dans Dreamweaver

Vous pouvez utiliser les requêtes multimédias avec des feuilles de style externes de deux manières. La première option consiste à lier à une feuille de style externe avec plusieurs ensembles de styles séparés par des requêtes de média. Dreamweaver associe les styles lorsque vous créez une disposition de grille fluide.

La deuxième option consiste à lier deux ou plusieurs feuilles de style externes distinctes à chaque page HTML et à inclure les requêtes de média dans chaque feuille de style. Dans les deux cas, le code CSS et HTML sont sauvegardés dans des fichiers séparés et la balise les connecte.

Que vous enregistriez toutes les requêtes multimédias et les styles associés dans un seul fichier ou dans des fichiers CSS distincts, vous pouvez également lier des feuilles de style supplémentaires à n'importe quelle page HTML. Par exemple, vous pouvez inclure un ensemble de styles distinct dans une feuille de style distincte conçue pour formater la page lorsqu'elle est envoyée à une imprimante.

Comment créer des requêtes multimédias dans Dreamweaver

Vous pouvez créer autant de requêtes multimédias que vous le souhaitez dans Dreamweaver et les inclure dans un ou plusieurs fichiers CSS. Pour créer une nouvelle requête multimédia dans Dreamweaver, procédez comme suit:

1. Ouvrez le panneau CSS Designer en choisissant Fenêtre → Styles CSS.

2. Sélectionnez une feuille de style existante dans le panneau Sources ou créez-en une nouvelle en cliquant sur le signe plus (+) dans le panneau Sources.

   

3. Cliquez sur le signe plus (+) dans le panneau @Media du panneau CSS Designer.

   La boîte de dialogue Définir les requêtes média s'ouvre.

4. Sélectionnez Média dans la première liste déroulante et Écran dans la deuxième liste déroulante.

   

5. Déplacez votre curseur vers la droite de chacune des listes déroulantes pour faire apparaître le signe plus, puis cliquez sur le signe plus pour ajouter un nouveau champ.

   Un nouveau champ apparaît dans la boîte de dialogue Requêtes multimédias afin que vous puissiez spécifier l'orientation. Ce champ est facultatif mais est généralement utilisé si vous souhaitez créer différents motifs pour les vues paysage et portrait sur une tablette ou un smartphone. Si vous ne souhaitez pas créer de mises en page supplémentaires en fonction de l'orientation, vous pouvez supprimer ce champ en cliquant sur le signe moins.

   Remarque: Les signes plus et moins ne sont visibles que lorsque vous faites glisser votre curseur sur le côté droit de la boîte de dialogue.

6. Déplacez votre curseur vers la droite des listes déroulantes, cliquez une deuxième fois sur le signe plus pour ajouter un champ et entrez une condition de largeur minimale.

   Le champ Min-Width apparaît dans la boîte de dialogue Media Queries afin que vous puissiez spécifier la largeur minimale que vous souhaitez utiliser pour cibler la requête. La largeur minimale est importante car la requête multimédia cible les styles en fonction de la plage de largeur minimale à maximale que vous spécifiez, abordée à l'étape suivante.

7. Déplacez votre curseur vers la droite des listes déroulantes, cliquez une troisième fois sur le signe plus pour ajouter un champ et entrez la condition de largeur maximale.

   Le champ Max-Width apparaît dans la boîte de dialogue afin que vous puissiez spécifier la largeur maximale que vous souhaitez utiliser pour cibler la requête.

8. Cliquez sur OK.

   La boîte de dialogue Requêtes multimédias se ferme et la requête média est générée et ajoutée à la feuille de style sélectionnée dans le panneau Sources du panneau Concepteur CSS.

9. Pour ajouter des requêtes multimédias supplémentaires à une feuille de style sélectionnée, répétez les étapes 3 à 8. Pour ajouter des requêtes multimédias à une feuille de style différente, répétez les étapes 2 à 8.

Bien que vous puissiez enregistrer des requêtes multimédias dans autant de feuilles de styles que vous le souhaitez, les enregistrer dans une feuille de style externe est plus efficace car chaque feuille de style doit être téléchargée séparément du serveur, ce qui nécessite plus de bande passante. Le téléchargement d'une feuille de style longue avec plusieurs requêtes de support est un peu plus efficace que le téléchargement de plusieurs feuilles de style.