Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Dreamweaver CS6 : Les nouveautés

Prise en compte de propriétés CSS3

Testez gratuitement nos 1336 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Depuis l'intégration du moteur de rendu récent webkit au sein de son interface, Dreamweaver CS6 améliore encore la prise en charge de certaines propriétés CSS3. Couplé à Fireworks CS6, cela accélère grandement notre flux de production en ce sens.
07:13

Transcription

Depuis l'intégration du nouveau moteur WebKit par le moteur de rendu de Dreamweaver, les CSS3 se sont largement diffusés maintenant ils s'utilisent grandement en mode de création dans Dreamweaver, et de même dans les propriété ici, sont apparus toute une série d'éditeurs qui vont nous permettre de rapidement agir sur ces déclarations-là. Par exemple, si je viens dans la partie Article ici, ou n'importe quel autre sélecteur, je ne vais pas avoir de nouveauté de ce côté-là, par contre, dans la partie ici, Ajout d'une propriété, si par exemple je prends la propriété, alors je vais quand même me mettre sur H2,ici, pour apporter une propriété à ce texte-là, je vais pouvoir apporter, par exemple, la propriété text-shadow et vous voyez dès que je tape le texte ici, text-shadow est trouvable ici dans cette liste. Alors, j'ai un petit éditeur, je vais pouvoir rentrer des valeurs pré-définies ici, mais j'ai un petit éditeur qui est aparu ici, un modificateur qui va me permetre de pouvoir mettre un décalage X d'un pixel, un flou d'un pixel, un décalage de Y idem, et puis ici, une couleur blanche et regardez, dès que je passe en mode création, vous voyez ici, en direct, que le h2 a cette petite ombre portée décalée qui va donner un petit relief, une lisibilité un peu plus soutenue à ce h2. Alors, certains diront, mais attention au niveau du code maintenant, si je passe dans la partie CSS, j'ai écrit Text-Shadow, ce qui serait la recommandation CSS3, mais, suivant les CSS3 que je vais utiliser, est-ce que je vais pouvoir avoir le bénéfice du préfixage par éditeur, donc -moz, -o, -WebKit, -KHTML, -MS etc. Est-ce que je les ai ? Alors pour cela, il n'y a pas trop d'aide, il va falloir les copier-coller, les ajouter pour une grande partie des éléments, regardez, si je viens ajouter, par exemple, ici, un box radius, je vais pouvoir ajouter un moz, voilà, mais si j'ajoute un Box Shadow, je vais pouvoir rentrer la couleur, l'inset, etc. Mais une fois que j'aurais rentré cette partie-là, ici, je vais mettre 1px par exemple, ici, je n'ai pas le moz qui va se générer donc il va falloir que je les génère, que je cherche. Alors, je vais me mettre sur l'article. Voilà, actualiser, je vais passer sur l'article. Je vais ajouter ici un Box Shadow. Et dès l'instant où je vais avoir un Box Shadow d'ajouté, si je mets une ombre de 7 pixels par exemple en décalage de 7, en rayon - non on va mettre 3 plutôt ici, voilà, et un 7 plutôt en rayon de flou, un rayon de diffusion de 3, et ici, une couleur légèrement grise. Ok. Dès que je valide cet élément, pareil, ça m'a généré le Box Shadow mais pas forcément le moz. Alors la seule solution va être de copier, de le cloner un certain nombre de fois et puis de rajouter le préfixe à la main, de cette manière. Voilà. Alors moi ce que je vous invite à faire, plutôt que de partir dans cette démarche, moi ce qui m'intéresse c'est, certes, cette prise en charge de l'éditeur là, mais ce qui m'intéresse aussi, c'est le mode rendu en direct ici qui va pouvoir apporter cette ombre portée, c'est ce qui va me permettre de travailler de manière plus efficiente. Ici, je vais supprimer le Box Shadow, je vais garder le Text Shadow, pourquoi pas pour le h2, mais j'aimerais apporter un border radius sur l'article, j'aimerais apporter un Drop Shadow, un gradient, pourquoi pas un arrière-plan. À ce moment là, je vais pouvoir m'appuyer sur des générateurs à lignes. Alors là dans Google, en tapant CSS3 générator, on arrive sur une sorte de top 10, top 15 des meilleurs outils, qui proposent des solutions en ligne pour pouvoir générer du CSS3. Alors, ça peut partir d'exemples très simples et très ergonomiques comme celui-là, où dès l'instant où je vais mettre que je veux 10 pixels, ça part et ça génère 10 pixels pour tout le monde. Par contre, si je marque 12 pixels, voyez, je vais pouvoir avoir des coins qui seront complètement décalés et les propriétés sont bien éclatées afin que tout le monde puisse comprendre. Donc, on a un border top left, border top right, border bottom right tout était décliné pour WebKit, pour Echo et pour CSS3 et donc je vais pouvoir copier directement ce code-là et le coller dans l'éditeur de Dreamweaver. On a des outils aussi comme box property ici, qui vont nous permettre de pouvoir directement travailler avec le modèle de bot complet. Donc les couleurs, les containers, les Text Sizes, les Borders Radius les Text Colums si on en ajoute à l'intérieur, ici, les Box Shadow, voyez, ça va très loin, après, on va avoir des supports qui vont être pour Android, [inaudible] OS, Internet Explorer et le code, ici, n'a plus qu'à être copié-collé, on peut, ou pas ajouter les préfixes de chaque éditeur et donc, on a une souplesse de travail avec en même temps, un mode de rendu et d'aperçu, ici, qui nous permet donc de pouvoir valider notre choix. Voilà également des générateurs de gradient, ici, qui vont fonctionner exactement de la même manière donc, on a des véritables outils éditeurs graphiques qui nous permettent de générer le code. Côté Adobe, regardons quand même que sur la sortie CS6, Dreamweaver certes, ne produit pas le code mais un outil qui va de pair avec Dreamweaver, qui est Fireworks CS6 cette fois-ci, nous permet, moyennant des outils de type outils rectangle ou de formes géométrique, ici, j'ai choisi un rectangle biseauté qui a permis de faire des coins arrondis, vous voyez ici, simplement en cliquant sur ses coins, on va pouvoir choisir le mode de rendu, moi ce qui m'intéresse c'est ce rendu-là, ici, je vais affiner, j'ai placé un gradient derrière, je peux même aller mettre un effet temps réel de type ombre portée que je vais pouvoir définir, je vais la mettre un peu proéminente pour la voir voilà, ici, je vais dire que ça, ça m'intéresse, c'est ça que j'aimerais pouvoir coder en CSS. Une nouveauté ici, qui est propriété CSS, je vais pouvoir la récupérer, l'ensemble des propriétés est écrite. Est-ce que je veux les commentaires qui me permettent de voir à partir de quand de quoi, de qu'est-ce, je les veux ou pas, pour quelle version de navigateur je veux exporter mon élément, et ici, je vais pouvoir tout sélectionner, sauf la largeur et la hauteur que je ne veux pas, par contre le dégradé, la couleur et la largeur de bordure, le rayon, le style de bordure et l'ombre, je les veux, je fais copier que la sélection ou copier tout. Là, je ne vais copier que la sélection. Je peux rebasculer dans Dreamweaver, je me mets dans Article, dans l'article, je vais supprimer cette partie-là qui est border et background, je vais garder les paddings intérieurs et les marges que j'avais mesurées. Je colle ce que j'ai récupéré, ici. Voilà. Maintenant, dès cet instant là, quand je passe en direct j'ai bien mon dégradé qui apparaît, donc, j'ai mon Text Shadow qui est resté de tout à l'heure, j'ai mon ombre portée et je vais pouvoir à tout moment, sur l'article, par exemple ici, venir dans ces éditeurs, micro-éditeurs de propriétés, venir modifier le Box Shadow, ici, 8 pixels, peut-être que cela fait un peu trop, je vais descendre à 7-8, vous voyez que le code s'édite directement ici et tout va se reporter sur le mode indirect. Alors, des fois il faut rafraîchir pour que les valeurs soient prises en compte, n'hésitez pas à ce genre d'éléments, par contre, faites attention, ici, je suis sur WebKit et le Box Shadow doit venir également être édité ici, pour pouvoir être pris en compte. Donc, Dreamweaver CS6 a continué à morceler, à travailler dans l'amélioration de l'ergonomie de la gestion des CSS3, au sein de son interface.

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 !