Le responsive web design est une technique qui permet de développer des sites web optimisés pour les navigateurs des postes de travail, des tablettes, des smartphones et autres équipements mobiles à partir d'une maquette unique.
Dreamweaver CC 2015 offre quelques nouveautés dans ce domaine, dont la prise en charge de Bootstrap par les outils visuels, l'ajout de composants Bootstrap, une barre déplaçable en mode Affichage en direct et des points d'arrêt au niveau des requêtes multimédias visuelles.
Booststrap est un framework très connu qui vous permet de développer l'essentiel de la mise en page et des fonctionnalités d'un site web, et de modifier le tout selon vos besoins.
Grâce à ces nouveautés, je peux également créer un site web réactif de A à Z.
Dans la boîte de dialogue Nouveau document, je peux choisir de créer du contenu réactif à partir d'une feuille de style Bootstrap nouvelle ou existante.
Ici, je vais cliquer sur l'onglet Bootstrap et choisir de créer un nouveau fichier CSS Bootstrap.
Je définis ensuite le nombre de colonnes et la taille des trois mises en page.
Pour le reste, je conserve les paramètres par défaut, je clique sur Créer, puis j'enregistre mon fichier.
Dreamweaver va ainsi générer la feuille de style CSS, le code JavaScript et les polices, et ajouter les fichiers Bootstrap respectifs dans des dossiers.
Ces fichiers constituent le système de grilles sur lequel repose la mise en page de mon site.
Je supprime le texte d'espace réservé, je redimensionne la fenêtre d'affichage en direct à l'aide de la barre, puis j'ajoute un point d'arrêt à un nouveau fichier CSS de sorte que ma feuille Bootstrap.css demeure parfaitement intacte.
Je double-clique ici pour étendre la fenêtre d'affichage en direct.
Vous pouvez réutiliser les composants Bootstrap, notamment les éléments de style comme les boutons, les images réactives, les carrousels et les barres de navigation, pour définir rapidement la mise en page et les styles.
Je vais ajouter ici un conteneur pour y stocker l'essentiel du contenu de mes pages.
Ma page est pratiquement finalisée.
Il ne me reste plus qu'à ajouter quelques images.
Dans le panneau DOM, je peux accéder rapidement à la section dans laquelle je veux ajouter une ligne pour ces images.
Je clique sur l'option Ligne de grille avec colonne pour insérer une ligne dont les colonnes sont déjà définies.
La valeur par défaut fixée à trois colonnes me convient, donc je clique sur OK.
Dans la fenêtre d'affichage en direct de Dreamweaver, vous voyez le sélecteur de classe automatiquement appliqué à la ligne et les balises div des colonnes de la feuille de style Bootstrap.
Je vais utiliser d'autres sélecteurs prédéfinis dans la feuille de style pour définir la largeur de chaque colonne et garantir un affichage optimal du contenu sur tablettes et smartphones.
J'insère ensuite l'image et je l'imbrique dans chaque colonne.
J'aimerais ajouter deux autres images dans cette section.
En mode Affichage en direct, je peux facilement ajouter des lignes et colonnes dans mon système de grilles.
Je peux cliquer sur l'icône de la dernière colonne div de la ligne pour en ajouter deux autres.
Dreamweaver actualise les classes Bootstrap en temps réel, et je vois instantanément le résultat dans ma maquette.
Pour finir, je clique sur les points d'arrêt des requêtes multimédias visuelles pour procéder à une vérification visuelle du contenu.
Dreamweaver CC est désormais un outil tout-en-un complet qui permet de créer des sites web modernes et réactifs.
Installez la dernière mise à niveau du logiciel et testez les nouvelles fonctions de responsive design.
