← Retour aux formations

Développement Web & No-Code

Dreamweaver CC : concevoir et intégrer des interfaces web responsives avec CSS et Bootstrap

Intermédiaire
Développement Web & No-Code

À propos de cette formation

Dreamweaver CC est l'éditeur de sites web Adobe le plus répandu dans le monde professionnel. Cette formation de 4 jours permet d'acquérir une maîtrise complète de l'outil : édition HTML5, mise en forme CSS3 via le panneau CSS Designer, intégration du responsive design, développement avec le framework Bootstrap et création de pages interactives grâce à jQuery. Les participants alternent apports théoriques et exercices pratiques intensifs pour une montée en compétences opérationnelle.

Objectifs de la formation

  • check_circleConstruire des pages HTML5 complexes exploitant CSS3, templates et contrôles de saisie
  • check_circleDévelopper des sites web responsives grâce aux outils intégrés à Dreamweaver
  • check_circleGérer l'accessibilité dans la conception et l'intégration web
  • check_circleCréer des mises en page riches et adaptables avec le framework Bootstrap
  • check_circleRéaliser des pages interactives en combinant JavaScript et jQuery

Programme détaillé

Module 1 — Fondamentaux du web et prise en main de Dreamweaver

  • Les protocoles clés d'une architecture web : HTTP, FTP, SMTP, POP3
  • Fonctionnement d'un site web : structure HTML, liens hypertextes et gestion des URL
  • Vue d'ensemble de la suite Adobe Creative Cloud
  • Prise en main de Dreamweaver et configuration de l'interface de travail
  • Exploration des modèles de pages de démarrage et du système Bootstrap intégré
  • Échanges entre Dreamweaver et Photoshop pour la gestion des ressources graphiques
  • Travaux pratiques : configuration du navigateur et installation des extensions nécessaires

Module 2 — Maîtriser l'interface de Dreamweaver

  • Fonctionnalités de l'éditeur de code et paramétrage de l'environnement
  • Exploration et test des modèles de pages existants
  • Travaux pratiques : découverte de l'interface, personnalisation et test des templates

Module 3 — Composition de pages HTML5

  • Utiliser le panneau CSS Designer avec CSS3 pour la mise en forme des pages
  • Créer et configurer des formulaires de saisie
  • Contrôles de saisie HTML5 : types, attributs et validation côté client
  • Construire des modèles de newsletters responsives
  • Conception de pages HTML5 complexes
  • Exercice : mise en pratique HTML et CSS3, création d'un formulaire et de pages web

Module 4 — Intégration du responsive design

  • Le Web Responsive Design dans Dreamweaver : principes et outils
  • Requêtes de média CSS et définition des points d'arrêt
  • Modifier et personnaliser les requêtes des modèles fournis
  • Construire une page responsive de A à Z
  • Intégrer des images et des vidéos adaptées à tous les formats d'écran
  • Gérer les différents modes d'affichage de l'interface
  • Exercice : création d'un mini-site entièrement responsive

Module 5 — Développement avec Twitter Bootstrap

  • Présentation du framework Bootstrap et de ses principes
  • Créer une page à partir du modèle Bootstrap intégré à Dreamweaver
  • Personnaliser la page et adapter sa structure
  • Intégrer des composants Bootstrap natifs
  • Modifier les composants via le CSS Designer
  • Utiliser l'inspecteur de DOM pour analyser et ajuster le rendu
  • Exercice : pages HTML5 riches conçues avec l'assistant Bootstrap de Dreamweaver

Module 6 — Interactivité avec jQuery Mobile et jQuery UI

  • Présentation de jQuery, jQuery Mobile et jQuery UI
  • Introduction à JavaScript via les comportements intégrés à Dreamweaver
  • Découverte des composants jQuery Mobile et création d'une interface mobile
  • Prise en main de jQuery UI et intégration de composants d'interface
  • Travaux pratiques : création de pages HTML interactives combinant JavaScript et jQuery

Prérequis

Avoir une vision élémentaire des composants constitutifs d'une architecture web.