Dreamweaver CS6 : Les nouveautés

Ajouter et modifier des balises DIV de grille fluide

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Une fois les grilles définies pour chaque plateforme de destination, il suffit de reproduire le prototypage de notre maquette en utilisant les nouvelles DIV de type fluide. Ces balises peuvent être redéfinies en largeur et en positionnement. L'ensemble du schéma final devra être adapté à chaque plateforme.
10:55

Transcription

Pour mettre en place et utiliser le mode grille au sein de Dreamweaver, il faut garder à l'esprit que le même document va être présenté, à la fois sur un téléphone portable, sur une tablette ou sur un écran large. Par défaut, Dreamweaver nous propose, comme la nouvelle mouvance le veut, qui est développée pour MobileFirst, on développe en premier pour un téléphone portable et après on le décline vers le bureau, on ne fait pas l'inverse. La première interface qui vous est présentée se trouve être sur une interface de téléphone portable. Je vous invite à passer dans le code, ici, pour regarder tel qu'il a été fait. Il est vrai qu'on utilise des balises div même si on prend un doctype de type HTML5, on va garder une portabilité inter-navigateur pour s'assurer qu'on aura une meilleure lisibilité quel que soit le navigateur, si celui-ci n’interprète pas les balises header, footer, nav, side, etc... Ce qu'on va faire, c'est supprimer cette partie, cette balise-là. On pourrait la garder et continuer mais on repart à zéro, on supprime cette partie-là, on va garder juste le gridContainer clearfix et on va laisser les class utilisées par le framework pour pouvoir repositionner, centrer et dimensionner le cadre de travail principal. On va retourner à la partie Création de Dreamweaver. On va insérer un div. Alors, pour se faire, généralement, j'utilise l'outil de la palette d'insertion Mise en forme et on va venir chercher Insertion, une balise div, alors que là, il ne nous faut pas une balise div, il nous faut une div un peu spéciale qui utilise la grille de mise en forme fluide, liquide et on va placer cette grille. On va lui donner un nom, je vais appeler la première header, on pourrait lui laisser le nom d'ID par défaut que l'on veut mais je veux que ce soit plus simple pour la repérer et l'appeler header et on va me demander si je veux démarrer une nouvelle ligne. Ici, il n'y en a pas. Que je démarre une nouvelle ligne ou pas, c'est pareil. On va placer cette balise directement sur l'élément. Ici, on me dit qu'il s'agit du contenu de la balise de disposition header. Parfait, je vais pouvoir maintenant, si je la sélectionne, avoir accès à deux poignées, il y a beaucoup de poignées, dans les angles mais seules les parties droite et gauche sont utilisables. La partie droite va redimensionner et la partie de gauche va repositionner en utilisant une marge. Toutes les informations vont être affichées pendant votre clic de souris, voyez, ici, j'ai six colonnes, une largeur de 100%, toutes les valeurs vont être magnétisées sur les colonnes, c'est-à-dire que vous ne pouvez pas vous arrêter entre deux colonnes ou au milieu. Ici, je pars et, dès que je réduis, les largeurs vont passer dans des valeurs un peu abstraites mais ce sont des valeurs qu'il faut respecter et si vous faites du Responsive Web Design à la main, vous vous apercevrez que, pour pouvoir connaitre ces valeurs-là, la formule que vous allez appliquer va vous donner ces réponses avec quatre à cinq décimales qu'il faudra préserver. Cette formule qui vous permet d'obtenir ces résultats c'est toujours la cible, le souhait qui va être divisé par le contexte dans lequel vous êtes, vous donnera la résultat. En clair, si je suis dans une largeur de 900 ou 960 pixels et que je veux obtenir 300 pixels, il faudra que je fasse 900 pixels divisé par 300 et ça me donnera le résultat. Si vous faites des trucs très décimaux, ça va être simple mais dès que vous allez rentrer 960 divisé par 340, ça vous donnera une valeur à virgule et c'est cette valeur à virgule que vous allez reporter ici, donc, là, 48,6956 par exemple. Continuons sur la partie gauche. Si je reprends cette partie-là, voyez que je vais mettre maintenant une marge gauche qui va elle-même être proportionnelle dans le même sens, ici et qui va me permettre de décaler ma cellule. Pour le header, on va dire que l'on souhaite avoir un header qui fasse toute la largeur, qui fasse une seule colonne sur la partie téléphone mobile. Je vais continuer le développement et venir rajouter encore une fois une div liquide, ici, que je vais appeler nav et là, cette navigation, on va l'appeler navigation, voilà. Et je vais démarrer une nouvelle ligne et je vais la positionner. Cette navigation va se positionner sur six colonnes et je vais venir la positionner sur deux colonnes. Je vais ajouter maintenant une div et cette fois-ci on me dit : veux-tu démarrer une nouvelle ligne ? Non, je ne le veux pas et je voudrais mettre le contenu de ma page, ici, sur la suite. Et là, Vous voyez qu'il y a une partie jaune qui s'allume, qui me dit qu'il y a une erreur et que ce n'est pas bien passé. On va repasser dans le code et aller voir ce qui se passe. Dans le code, elle est bien placé, ça va. Des fois, il se pourrait que mon curseur soit mal placé et que la div se soit créée à l'intérieur de l'autre. Dès que vous voyez du jaune, jetez un coup d'oeil dans le code pour être sûr de bien avoir généré l'élément. Ici, je vais tout simplement... il me dit : je voudrais bien, mais je fais six colonnes, je ne peux pas passer là-haut je vais la dimensionner jusqu'à quatre colonnes, dès qu'il y en a 4, je lâche, et voyez qu'elle est montée toute seule sur cette partie basse. Je pourrais utiliser la flèche ici pour dire non, ne reste pas là et va commencer une nouvelle ligne et je la ferais redescendre, toujours sur quatre colonnes mais je serais sur une nouvelle ligne. Ici, je veux vraiment partir dans cette partie haute. On va continuer, je vais volontairement laisser mon curseur ici et rajouter une div et un design. Je voudrais que ça fasse le footer et je veux démarrer une nouvelle ligne. Je pars, il est mal placé, il est resté ici et c'est là qu'il n'y a pas ça dans le code, vous allez voir que le footer s'est mal placé. Il suffit de le décaler ici dedans, ça reste quand même du code HTML donc, on n'est pas pris par la racine, à devoir rester dans la partie création, on peut revenir et, là, vous voyez que tout s'est positionné correctement. Ici, en partie téléphone, je souhaiterais avoir ma barre de navigation de cette manière-là, je pourrais rajouter des parties de contenu qui vont venir s'afficher ici. Donc, je pourrais revenir ici maintenant et rajouter une balise div Contenu1, on va la repérer de cette façon. Par contre, on va venir dans le code ici et dire que c'est contenu 1 pour pouvoir revenir. Faites attention au niveau des CSS parce que si vous changez le code ici il faudra aller le changer dans toutes les parties du CSS qui sont déjà apparues et qui ont été fabriquées pour nous par le code. Faites bien attention chaque fois à toutes les manipulations que l'on va faire Ce que je vous propose de faire c'est tout simplement de revenir en mode création ici et de refaire deux Ctrl+Z, ça sera très vite fait et donc ici, je mets mon curseur à l'extérieur, mode création, voilà. Donc, voilà la destination finale, le header, vous l'avez compris, démarrer une nouvelle ligne créer la navigation, ne pas démarrer une nouvelle ligne faire un bloc qui va devenir jaune que l'on positionne en haut à droite Contenu 1, ne pas démarrer une nouvelle ligne faire un Contenu 2 qui va se replacer à droite et refaire un contenu nouvelle ligne qui va faire le footer et qui va le placer de cette sorte. On va enregistrer tous ces éléments et on va basculer maintenant dans la partie Tablette. Comment la tablette va-t-elle se reproduire ici ? Ici, je pourrais reproduire la navigation exactement de la même manière et donc, je vais lui demander de faire cette fois-ci non pas deux mais peut-être trois éléments et ici de faire cinq éléments. On va réduire à cinq colonnes et vous suivez ici sur la partie blanche qui s'affiche de façon à voir le nombre de colonnes que vous avez, dès que vous avez cinq, vous pouvez lâcher, tout se place automatiquement. Au niveau du grand écran, on va faire différent. on va dire qu'on garde la navigation sur douze colonnes, par contre ici je vais lui demander de s'aligner sur la div de la grille et je vais garder mon contenu de cette manière. Par contre, lui, je vais le faire de six colonnes au lieu de douze, j'ai été à cinq, je vais aller à six colonnes et lui, je vais positionner à six colonnes. Il va automatiquement se positionner à droite et ici on a les contenus. Ce qu'on va faire, c'est simplement cloner un peu de contenu. On va aller chercher tout. Je vais aller chercher du Lorem ipsum, j'en ai sur Dreanweaver dans l'onglet commun, ici. Je vais venir sélectionner mon contenu1 et je vais placer un paragraphe, ici, j'ai un paragraphe de contenu1, je vais mettre une balise h2 par exemple pour garder de ce titre-là. Ici, je vais sélectionner mon contenu2, je vais rajouter un paragraphe ici, pour le contenu2 et je vais le mettre en paragraphe h2. Je vais garder le header en h1 histoire d'avoir du contenu. J'enregistre tout : Fichier Enregistrer tout. Qu'en est-il ici du point de vue de ma navigation ? Je pourrais rajouter quelques liens. On pourrait appeler Page 1, ici et rajouter un petit tiret, Page 2 un petit tiret, Page 3, etc. Vous avez compris le principe, je vais rajouter un lien ici un lien factice, une ancre qui va me permettre de mettre un lien qu'on va pouvoir voir. Ici, pareil, un lien. Je valide. Ma page 3, un lien et je valide pareil. Voilà, tout est terminé. Encore une fois, un Enregistrer tout pour bien s'assurer qu'il y a beaucoup de fichiers, qui sont interconnectés, et vous voyez maintenant le principe de ma disposition sur un grand écran avec mes deux articles côte-à-côte et mon pied-de-page en dessous. Ici, sur une tablette, on voit bien qu'on a changé, ici, les éléments se sont positionnés de manière différente et ici, quand je viens sur ma partie distincte, on voit bien que j'ai cet élément comme cela. Ici, comment va-t-on faire pour lire ? Tout simplement, en passant en mode en direct, ici, on va avoir le contenu, on va pouvoir rendre une fenêtre plus petite et voyez, ici, dès l'instant où je vais agrandir le contenu, on va aller le visualiser dans un navigateur. Je vais lancer Safari par exemple. Voilà, nos articles Page 1, Page 2, Page 3, les contenus qui s'affichent correctement et, dès l'instant où je vais réduire cette largeur, voyez que les contenus se réajustent, les colonnes et les colonnes vont passer directement. Tout est vraiment liquide, tout s'adapte, tout se repositionne, tout se redistribue au fur et à mesure. Il ne nous restera plus qu'à peaufiner les CSS, les travailler et vous voyez que travailler en mode ligne liquide avec Dreamweaver, si notre travail est bien préparé en amont sur le wireframing, on va se retrouver vraiment avec un outil de production qui va pouvoir nous épauler et nous aider dans ce genre de développement.

Dreamweaver CS6 : Les nouveautés

Allez à la découverte des nouveautés de Dreamweaver CS6, qui gravitent autour du développement d’applications mobiles, de la pluri-distribution et de sites Internet réactifs.

3h16 (40 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Spécial abonnés
Date de parution :23 avr. 2012
Mis à jour le:5 avr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !