Bienvenue dans ce tutoriel sur les requêtes multimédias.
Ces règles CSS déterminent la mise en page et le style du site web pour les terminaux mobiles et les postes de travail ainsi que d'autres supports, comme le papier.
Dreamweaver CC facilite l'ajout et la mise à jour des requêtes multimédias.
Je vais vous montrer.
Actuellement, j'utilise l'espace de travail Standard et le mode En direct.
J'ai ainsi accès à la barre de requêtes multimédias, une représentation visuelle des requêtes multimédias du code CSS.
Si je clique sur différents points, l'affichage du site change en fonction de ces requêtes pour donner un aperçu du résultat sur différents appareils.
Si la barre est invisible, cliquez sur cette icône à gauche pour l'afficher.
Pour désactiver l'affichage basé sur les requêtes multimédias, double-cliquez dans la zone grise à droite.
Pour l'instant, je prévisualise le site dans le mode En direct de Dreamweaver CC.
Pour le voir dans un navigateur, je peux utiliser l'aperçu en temps réel en cliquant sur cette icône en bas à droite.
Je peux ainsi prévisualiser les requêtes multimédias réactives directement dans un navigateur et sur n'importe quel appareil pour interagir avec elles en temps réel.
Il existe un autre tutoriel sur la configuration de l'aperçu en temps réel dans le navigateur.
Je vous le recommande.
Nous allons maintenant examiner le code utilisé pour créer une requête multimédia.
Je passe en mode Fractionner, puis j'accède au fichier styles.css.
En bas du code du site actuel, on a une requête multimédia, signalée par @media au début.
Et ici, on a les trois tailles d'écran.
Grâce à la requête multimédia, lors de l'accès au site web, la largeur de la fenêtre de navigateur est prise en compte.
Sur une tablette, le CSS correspondant est appliqué.
Si je clique sur ce triangle, j'affiche le code déclenché pour l'affichage sur tablette.
Idem pour cette requête, qui correspond aux postes de travail et aux grands écrans.
J'ouvre le panneau CSS Designer en choisissant Fenêtre > CSS Designer.
La section Sources affiche les feuilles de styles liées et internes de la page web.
Ici, il n'y en a qu'une, styles.css.
Je clique dessus.
Sous @Requêtes multimédias, je peux cliquer sur les différentes requêtes.
Les sélecteurs en dessous changent en fonction de la requête sélectionnée.
La section Sélecteurs rassemble tous les sélecteurs définis dans la requête multimédia sélectionnée.
Outre les requêtes multimédias définies pour le site, on a ici les styles GLOBAL pour la page.
Ils sont le socle du site tout entier.
Ces trois requêtes priment sur les styles GLOBAL lorsqu'elles sont actives.
Ici, GLOBAL renvoie aux terminaux mobiles, car ce site a été initialement conçu pour ces appareils.
Le style et la mise en page de départ du site sont prévus pour un terminal mobile, en tout cas un navigateur dont la fenêtre mesure moins de 768 pixels de largeur.
En cas de fenêtre plus large, ces sélecteurs sont activés pour que l'affichage s'adapte aux tablettes et écrans plus larges.
Je vais maintenant modifier une requête multimédia.
Je commence par m'assurer que styles.css est sélectionné.
Je veux ajuster ce titre, qui utilise le sélecteur hero-title.
En fait, je veux uniquement jouer sur la taille, 992px, qui correspond au poste de travail.
Je veux agrandir le titre pour cette seule requête.
Je clique sur la requête, puis sur le sélecteur hero-title.
Regardez : dans le code styles.css, la ligne est sélectionnée.
Je peux donc procéder aux modifications directement en mode Code.
Dans le panneau CSS Designer, le sélecteur correspondant est sélectionné.
Toutes ses propriétés s'affichent.
Ici, je souhaite modifier font-size.
Je clique et fais glisser pour modifier la valeur.
Désormais, le titre est bien trop grand, mais c'est pour vous montrer quelque chose.
Je réduis ce panneau pour afficher toutes les requêtes multimédias.
À la taille supérieure, le titre convient toujours.
Même chose sur tablette.
À la résolution inférieure, sur mobile, tout va bien.
Mais pour la requête 992px qui nous intéresse, le titre est vraiment trop grand.
Pour ne pas avoir à passer par le panneau CSS Designer, je peux cliquer directement sur l'élément à modifier.
Voici l'élément hero-title sur lequel je travaille.
Je clique dessus avec le bouton droit, puis je sélectionne Atteindre le code.
La liste des variantes s'affiche : GLOBAL, la première, puis la requête 768px, celle que nous venons de modifier, 992px, et enfin la grande qui nous intéresse.
Il faut seulement savoir laquelle modifier.
Je clique sur celle-ci et j'accède à la ligne de code correspondante en bas.
Je remplace manuellement pour revenir à 8.4vw.
Dans cet exemple, une page n'est associée à aucune requête multimédia.
Je vais en ajouter via le panneau CSS Designer.
Je dois d'abord m'assurer que la feuille CSS souhaitée est sélectionnée, en l'occurrence styles.css.
Je clique sur le signe plus en regard de @Requêtes multimédias.
Chacune des conditions du menu déroulant offre des paramètres supplémentaires.
Avec media, je peux indiquer la destination du site, c'est-à-dire un écran ou une impression.
Le code correspondant s'affiche en bas.
La requête orientation permet de tenir compte de l'orientation de l'appareil.
La requête resolution permet par exemple de définir 144 dpi.
À chaque fois, le code correspondant est généré en bas.
Je veux ajouter une requête multimédia pour le responsive design.
Je sélectionne min-width.
J'opte pour une valeur de 768 px.
Outre les pixels, de nombreuses unités de mesure sont disponibles.
Je peux aussi ajouter plusieurs conditions en cliquant sur le signe plus et ainsi définir max-width sur 991 px. « and » a été ajouté dans le code.
Ces deux conditions doivent donc être remplies pour déclencher la requête.
Finalement, je supprime la deuxième en cliquant sur le signe moins.
Je clique sur OK.
La requête multimédia s'affiche désormais dans le panneau CSS Designer et dans la barre de requêtes multimédias.
Comme j'ai utilisé minimum-width, les flèches indiquent que la requête est déclenchée depuis la valeur minimale jusqu'à l'extrémité droite, à la requête suivante.
La couleur violette indique toujours la largeur minimale.
Je vais maintenant passer sur un autre projet en cours pour vous montrer que si je décide d'utiliser max-width, la couleur sera verte.
Les couleurs clarifient l'affichage.
Le bleu signale un minimum et un maximum.
Je reviens à l'autre projet pour vous montrer le troisième emplacement d'affichage des requêtes multimédias, en bas du fichier styles.css.
Ma requête se trouve ici et je vais y ajouter du code.
J'insère plusieurs retours entre les accolades.
Je colle ce code que j'ai préparé avant.
Ce sélecteur de classe s'applique au texte « exhibition » en haut.
Il modifie la police et l'espacement.
Regardez en haut la requête multimédia que j'ai créée via le panneau CSS Designer.
Si je déplace la barre latérale...
Pour rappel, j'ai créé la version mobile en premier, celle-ci donc, avec cette apparence.
Quand j'atteins la requête multimédia, le style .hero-leadin est ignoré.
Regardez, hop !
Je passe à la mise en page pour tablettes.
Voilà comment fonctionnent les requêtes multimédias.
J'ai donc créé cette requête dans le panneau CSS Designer.
Je le réduis pour l'instant pour mieux voir.
Je vais maintenant utiliser la barre de requêtes multimédias pour créer la suivante.
Les méthodes sont équivalentes.
Celle-ci est plus visuelle.
Peu importe l'emplacement du curseur.
Vous voyez le signe plus ?
Je clique dessus. max-width est sélectionné, et la valeur correspondant à l'emplacement de la barre latérale est renseignée.
Je veux toutefois utiliser min-width, comme tout à l'heure.
J'indique 992 px.
Je clique sur Créer un nouveau fichier CSS, je sélectionne le fichier existant, styles.css, puis je clique sur OK.
Avec la barre de requêtes comme avec le panneau CSS Designer, le résultat est identique.
En bas du code, min-width a été ajouté.
J'ajoute maintenant un sélecteur déjà créé.
Je pourrais aussi utiliser le panneau CSS Designer, mais je vais plutôt coller le sélecteur dans le code.
Il agit sur la même classe, .hero-leadin, mais se déclenche seulement à 992 px ou plus.
J'ai donc ma version mobile.
L'affichage change quand j'atteins la requête suivante.
Passé 992 px, il change encore.
Je peux cliquer ici pour passer à une autre requête multimédia.
Voilà qui conclut ce tutoriel.
Pour télécharger le code utilisé dans cette vidéo, cliquez sur le lien sur la page.
Vous savez maintenant utiliser le mode En direct, le mode Code et le panneau CSS Designer pour créer facilement des requêtes multimédias pour vos sites web en responsive design.
C'est tout pour le moment.
D'autres tutoriels sur Dreamweaver CC sont disponibles.
Je vous les recommande.
