Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Dreamweaver CS6 : Les nouveautés

Définir les grilles

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Bien que cela puisse paraître très simple et évident, il peut être intéressant de bien comprendre chacun des paramètres de définition du mode Grille liquide et de préparer ses interfaces en amont en suivant ce principe. Ensuite, Dreamweaver CS6 prend en charge le reste.
07:27

Transcription

Dreamweaver nous propose dans sa version CS 6, l'utilisation des modes de grille liquide. Plutôt que d'en parler, passons directement à la mise en place de cette nouvelle mise en forme de grille fluide qui peut être accessible soit par ce menu-là, soit depuis le menu nouveau ici, vous allez pouvoir directement venir accéder à ce même raccourci d'interface. Ici, on a vu que pour développer un mode grille, on va utiliser des colonnes qui vont se répartir en nombre et en largeur en fonction du périphérique que l'on va utiliser. C'est surtout de la largeur de diffusion que l'on va utiliser sur le périphérique. Laissez-moi revenir quelques instants sur le site de mediaquery.es où on voit justement la distribution de l'information en fonction de la plateforme de travail. Voyez ici, si je garde cette en-tête et ici un menu, on va retrouver cette en-tête ici, mais dans une proportionnalité différente et on ne retrouvera pas le menu, par exemple, où on retrouvera ces éléments ici sur deux colonnes, ici sur deux colonnes, ici sur une seule colonne et là sur une petite colonne réduite. Donc c'est à nous de pouvoir voir comment on va redistribuer cette information, comment on va la redispatcher, la représenter et combien de colonnes on a besoin pour représenter cette information. Ici, on ne va pas se dire que c'est petit et ne mettre que deux colonnes, il ne faut pas confondre la largeur en colonnes qui va canaliser l'information, c'est la granularité dans laquelle je vais diviser l'information. Ici, regardez, on voit bien que c'est une seule division. Ici, on va dire que ce sont deux divisions, une partie là et une partie là, mais une fois que j'ai divisé en deux ici, on voit que je vais diviser en quatre cette partie-là, à peu près. Je vais diviser en quatre, une pour les icônes, une pour les textes. Ici maintenant, si je regarde cette partie, je divise et c'est presque du un, deux, trois, quatre, cinq... En fait je pourrais travailler avec dix colonnes par exemple. Si je travaillais avec dix colonnes, je pourrais me dire qu'ici, il faut diviser par deux, j'ai cinq colonnes, là j'en ai une, là j'en ai quatre et là j'en ai deux pour chacun. Voyez donc qu'il faut raisonner dans ce sens-là, et c'est très important de mettre ça en place. Ce que je vous invite à faire également, c'est, dès la conception de votre interface, utiliser un outil comme Fireworks qui va vous permettre, de faire un nouveau à partir d'un modèle dans lequel je vais pouvoir me baser sur un grid system et partir sur un grid en mois de 12. Là il n'y a pas de mois de 10 comme je vous le présentais juste avant mais vous créerez votre mode de grille sur 10, ce sont des modèles qui peuvent être ajustés, et de baser votre travail de concepteur wireframe non pas au pixel près du détail avec les ombres portées mais des proportionnalités d'espace réservées dans l'interface basées sur un mode grille déjà. De façon à ce que, si je refais à nouveau à partir un modèle cette fois-ci, arriver à ce qu'on appelle un wirefame. Ici, quand vous êtes dans un wireframe, je vais en prendre un classique, basé sur un mode grille, qui va permettre de pouvoir répartir l'interface en fonction du device. Je serai sur un device de type Ecran, je peux prévoir le modèle de type Tablette et Smartphone. Laissez-moi vous montrer un dernier élément, si je fais un document de 600x400, peu importe la taille, ici vous avez une page 1 qui va faire 600x400, rien ne m'empêche de créer une nouvelle page, donc j'ouvre une deuxième page, et de recadrer cette page ou de travailler de manière plus précise sur la taille de la zone de travail et dire que je ne veux plus 600, je veux 200. Je vais préserver cet angle, voilà. J'aurai une mise en forme que je vais pouvoir travailler en mode grille toujours, pour un smartphone par exemple, et sur la page 1 travailler la même chose mais pour un écran. Pensez donc, dès la conception, à implémenter votre mode grille. Retournons dans Dreamweaver. Justement, cette version CS 6 me permet de pouvoir définir combien de grilles mon designer ou mon concepteur ergonomique a prévu pour le mobile. On peut dire : là j'en veux huit, j'en veux dix. Et ce n'est pas parce que ça va être petit que vous allez avoir moins de colonnes. Encore une fois gardez bien à l'esprit, c'est vraiment la granularité de cette information et vous avez besoin de la découper. Ici, on peut aussi partir pour quatre, par exemple, mais pensez que quatre, c'est uniquement divisible par quatre et par deux, c'est tout, donc cela va dépendre de ce que vous avez besoin de faire pour placer vos icônes, etc., tout en gardant, bien sûr, une proportionnalité de représentation. Lisez Mark Boulton dans le texte, vous verrez ce que je veux dire. Ici, au niveau de la tablette, maintenant, on va pouvoir redéfinir, et pareil ici pour le bureau. La suite, c'est quelle va être la largeur globale que je vais vouloir utiliser. Est-ce que je pense à des marges externes, ici, et de combien de proportionnalité je vais garder à la largeur globale de mon travail. On pourrait partir ici sur un six, ici un huit et un douze, voilà. Ici, je vais garder les valeurs telles quelles, ça me va très bien. Par contre, ici, pour le portable, vous allez pouvoir définir la largeur de colonne, c'est-à-dire combien fait la gouttière, 25 % de largeur de la colonne, 15 ou 20 ? Je vais partir sur 18 % de la largeur de la colonne. Le petit dessin rose n'est pas interactif et ne va pas s'adapter aux valeurs que vous avez saisies mais vous avez compris le principe. Maintenant, vous allez définir le doc type sur lequel vous allez travailler. Ce sont des technologies qui ne s'appliquent pas spécifiquement à html5, elles font partie du mouvement philosophique entraîné par cette mouvance html5 mais vous pouvez très bien l'appliquer sur un doc type antérieur, il n'y aura aucun problème de compatibilité. Ici, au niveau de la liaison du fichier css, ne liez pas de fichier de reset parce que beaucoup de modes grille vont utiliser leurs propres modes reset et donc vous pourrez rentrer. Rien ne vous empêche, par contre, d'aller intervenir sur ce mode de reset et de modifier les valeurs que vous souhaitez. Vous avez une dernière case qui vous permet de rétablir les valeurs par défaut tel que Dreamweaver vous les propose, et less FrameWork également puisque c'est less FrameWork qui est intégré au sein de cette interface. Dès l 'instant où vous allez créer, on va vous demander d'enregistrer le fichier css, je vais aller l'enregistrer dans le chapitre quatre, ici, et lui donner le nom de cette étape qui va s'appeler 04_02. J'enregistre mon fichier et voilà, maintenant, je me retrouve avec un document sans titre html qui contient l'ensemble des fichiers nécessaires. Pour l'instant, je vais enregistrer ce fichier source pareillement. Cette fois-ci, c'est un fichier html et je vais l'enregistrer également dans le chapitre quatre, ici et je vais lui donner le même nom. Dès l'instant où je veux enregistrer, Dreamweaver me propose d'enregistrer le boilerplate et le respond.min de js, ou plutôt me demande de les copier vers le chapitre quatre. Je fais copie vers le chapitre quatre. Il les copie à cet endroit-là et maintenant, j'ai l'intégralité des fichiers nécessaires : boilerplate.css, respond.min.js, qui sont enregistrés dans mon dossier accessible et transmis sur le server une fois que le site sera développé. Regardons justement ce fichier boilerplate, ici. Je vais passer en mode code uniquement et regardez, ici, ce fameux fichier reset.css dont je vous parlais en vous disant ne pas l'utiliser puisqu'il est redéfini également dans la partie redéfinition de html5 redéfinition de la balise html, l'utilisation de la balise body, etc., avec toutes les redéfinitions nécessaires par boilerplate qui vont être faites directement au sein de ce fichier. Voilà, donc Dreamweaver CS6 nous permet de directement partir en mode grille fluide depuis l'interface de création d'un nouveau document.

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 !