CATALOGUE Design et Infographie Formation WebDesign UX / UI Apprendre le Responsive Design - en HTML5 et CSS3

Utilisation des Media Query dans Dreamweaver

Retour à la formation
Chapitre 8 Leçon 3
Précédent
Suivant

Apprenez à utiliser les Media Query dans Dreamweaver pour adapter vos sites web à différentes tailles d'écran.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons explorer l'utilisation des Media Query dans Dreamweaver pour le développement de sites web en responsive design. L'objectif est d'intégrer ces requêtes directement dans une page Dreamweaver, qu'il s'agisse d'une nouvelle création ou d'une modification d'un fichier existant.

Nous partirons d'un document vierge dans Dreamweaver et utiliserons les outils intégrés pour insérer des requêtes multimédia. Une approche consiste à utiliser les Media Query par défaut proposées par le logiciel, permettant de générer automatiquement des feuilles de style adaptées pour différentes tailles d'écran : 320 pixels, entre 321 et 768 pixels, et au-delà de 769 pixels.

Il existe une autre méthode pour créer des Media Query personnalisées, en définissant manuellement les largeurs minimales et en associant chaque requête à un fichier CSS spécifique. Cette méthode offre une flexibilité accrue pour adapter les styles CSS à diverses résolutions d'écran, garantissant ainsi une expérience utilisateur optimale sur tous les dispositifs.

Objectifs de cette leçon

Les objectifs de cette vidéo sont :

  • Apprendre à insérer des Media Query dans Dreamweaver.
  • Comprendre comment adapter les feuilles de style CSS pour différents types d'écrans.
  • Savoir utiliser les outils intégrés de Dreamweaver pour créer des fichiers CSS réactifs.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé de :

  • Avoir une connaissance de base de Dreamweaver.
  • Comprendre les principes fondamentaux du CSS et du responsive design.
  • Savoir définir un site dans Dreamweaver.

Métiers concernés

Les connaissances acquises dans cette leçon sont particulièrement utiles pour :

  • Les développeurs Front-End.
  • Les web designers.
  • Les intégrateurs HTML/CSS.
  • Les concepteurs d'interfaces utilisateur responsables du responsive design.

Alternatives et ressources

Parmi les alternatives à Dreamweaver pour la gestion des Media Query, on trouve :

  • Visual Studio Code avec des extensions appropriées.
  • Sublime Text avec des plugins de prévisualisation.
  • Adobe XD pour le design et le prototypage responsive.

Questions & Réponses

Dreamweaver propose l'utilisation des Media Query par défaut ou la création manuelle de requêtes multimédia personnalisées.
La balise Metanem Viewport force le périphérique à afficher la page dans la définition de son écran, améliorant ainsi l'ergonomie et l'expérience utilisateur.
Le bouton plus permet de créer une nouvelle requête multimédia en définissant des paramètres personnalisés tels que la largeur minimale.