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

Dreamweaver CS6 : Les nouveautés

Réorganisation du menu et du panneau d'insertion

Testez gratuitement nos 1340 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Les panneaux et les menus d'insertion ont été repensés et réagencés afin d'une part de n'utiliser que les éléments récurrents dans un flux de travail optimisé, et d'autre part afin que les deux gardent le maximum de cohérence et de similitude de présentation. Vous allez en voir les détails et les principales modifications.
08:53

Transcription

Le menu d'insertion et le panneau d'insertion ont été complètement réactualisés dans cette version CS6 12.1 En fait, on avait besoin de beaucoup plus d'espace pour pouvoir intégrer l'ensemble des balises HTML5. Un certain nombre de balises ou un certain nombre de fonctionnalités n'étaient pas très utilisé dans les flux de travail classiques, donc tout a été réorganiser pour permettre d'une part de gagner de l'espace et d'autre part d'optimiser les flux de travail. Alors regardons de plus près ici, cette palette d'insertion, elle peut se présenter, bien entendu, sous forme d'un panneau ici ou sous forme d'un menu. Le plus simple pour basculer plus tôt que de glisser-déposer est de basculer dans les modes d'affichage ici. Si je repasse en mode classique, je vais pouvoir retrouver ma barre d'insertion sous forme de petits onglets ici. Dans lesquels il suffit de basculer pour pouvoir accéder à leur contenu. Ou alors de passer en mode designer ici. Le nouveau mode designer qui intègre ce panneau sous forme de menu, sous forme de panneau. Si on les regarde de plus près par exemple, ici ; prenons les éléments dans ce menu déroulant, ils vont nous permettre de basculer l'équivalent des petits onglets, ici, de la barre de menu. Je vais pouvoir regarder les éléments communs dans lesquels je vais trouver les classiques éléments que l'on utilise. Je peux faire un petit peu d'espace ici, voilà. Les éléments classiques que l'on utilise lors de la création d'une page HTML. Sinon on peut accéder à des éléments de mise en forme ici, des éléments de média, etc. Donc ils parlent d'eux-mêmes. Si on regarde de manière diagonale un peu rapidement dans ces éléments là, on s'aperçoit que de nouveaux menus sont apparus qui sont les éléments justement Médias et les parties ici, de Modèles. Alors les parties de Modèle avant, étaient intégrées dans la partie commune. Maintenant ils se retrouvent séparés, isolés pour permettre une meilleur utilisabilité. Et la partie Médias ici, est apparue avec tout ce qui va être les compositions d'Adobe Edge Animate. Alors Adobe Edge Animate, c'est un outil qui permet de créer des animations à base de HTML, CSS et Java Script et qui fait partie de votre Créative Suite. Donc un aller-retour entre Dreamweaver et cet outil permet une meilleure intégration des animations. Bien entendu les nouveautés au niveau vidéo HTML5, audio HTML5. Et puis les anciennes possibilités comme les animations Flash ou les films Flash qui vont permettre de pouvoir alimenter en vidéo des navigateurs plus anciens. Des navigateurs qui n'interprètent pas les balises HTML5. Alors si on regarde de plus près, on voit ici également que l'onglet Spry a été maintenu. Adobe a annoncé que Spry allait être retiré, n'allait plus être poursuivi. Puis on s'aperçoit dans cette version qu'il continu à exister. On va avoir d'autres modèles de librairie qui vont être intégrés. Spry va rester Open Source et donc sera toujours utilisable. Et pour l'instant on va pouvoir continuer à utiliser soit des ensembles de données, des moteurs de validation pour nos formulaires ou encore certains menus particuliers, comme les menus d'accordéons redevenus panneaux à onglets. Donc, Spry n'a pas été supprimé de cette version 12.1 Par contre un des onglets qui a disparu, c'est l'onglet Texte ici, qui ne fait plus partie de cet élément. Et en fait, parce que tout simplement, on retrouve le maximum des éléments texte depuis l'inspecteur de propriétés dans notre utilisation classique de remplissage du web. Alors deux des éléments quand même, qui faisait partie de cet onglet Texte qui ne se retrouvent pas dans les barres de propriété. Rappelons ce que l'on retrouve dans les barres de propriété, ça va être Bold, Italic, tout ces éléments là, Header, etc. Tout ce que l'on ne retrouve pas, ça va être surtout les caractères particuliers. Et là ici, dans la partie commune, on retrouve un petit menu déroulant avec tous les caractères en particuliers qui va nous permettre rapidement de pouvoir les utiliser comme les balises UTM par exemple ou certains caractères comme les guillemets ouvrants et fermants. Et puis un autre élément que l'on ne retrouve pas classiquement, en fait et qui faisait partie de l'onglet Texte va être la liste de définitions. Liste ici que l'on ne retrouve pas puisque c'est vrai que dans l'inspecteur de propriétés on va pouvoir retrouver un HTML des listes classiques mais on ne va pas pouvoir retrouver des définitions de liste. Alors pour cela, il faudra aller dans l'élément de Format ici, et on va pouvoir trouver dans l'onglet Liste ici, Liste de définitions. Alors son utilisation est très simple parce que dès l'instant où je l'utilise, je vais pouvoir générer une paire de balises dl dt. Je vais pouvoir remplir par exemple, un contenu. Et dès que je touche sur la touche Entrée ou la touche Retour ici, on va automatiquement générer une balise dd qui va être la définition même de ce contenu. Voilà, donc une fois que je vais retoucher sur la touche Retour, je vais automatiquement repasser à la ligne et générer cette fois-ci un nouveau titre de définition. Donc ici, il suffit de continuer à rentrer son texte. Si je veux sortir maintenant de cette liste de définitions, il suffit de taper deux fois Retour pour enfin sortir de cette liste de définitions Au sein même de la balise commun, donc a disparu de la partie En-tête certaines balises Méta que vous pouvez parfois utiliser comme base, lien ou rafraîchissement. Mais certaines nouvelles sont apparues comme par exemple le Viewport ici, l'Aire d'affichage ici, qui va tout simplement insérer une balise Meta Name Viewport dont le contenu sera width=device-width et initial-scale=1 qui est une balise très importante surtout si on fait un développement pouvant être visualisé sur des appareils mobiles. Ça va empêcher les appareils mobiles de redéfinir la définition de notre site, des données que l'on aurait pu rentrer dans les CSS et les obliger à s'adapter automatiquement à des contenus Responsive. Donc balise très importante surtout si on développe à destination des mobiles. Continuons l'exploration ici, sur les balises de mises en forme. Première disparition, ce sont ici vous vous rappelez on avait à l'époque balises de Division puis Standard au mode étendu. Le mode de mise en page sous forme de tableau n'est plus d'actualité dans les sites modernes et donc ça a été complètement retiré. Par contre on bénéficie toujours des balises Div. Des balises Div de mise en forme pour la grille fluide que l'on avait dans les versions antérieures et aussi on a préservé les balises Div à positionnement absolu qui peuvent parfois être utilisées. Ensuite on retrouve l'ensemble des balises sémantiques apparues avec HTML5 qui ont été traduite ici en français. Ça surprend un peu au départ. Mais ici on a bien la balise Header. Si je clic on va bien avoir ici une balise Header qui va pouvoir être mise en place et non pas une balise En-tête. Une balise HGroup, une balise Nav, Side, Article, Section et Footer. Qui donc vont apparaitre ici, maintenant dans la partie Mise en forme et venir éteindre simplement, ce que l'on avait avant, uniquement les balises Div. Ici dans la partie Média, on l'avait vu tout à l'heure, un rapide survol. Donc tous les nouveaux médias apparus avec HTML5. Un grand changement au niveau de la balise des formulaires ici. On était dans les formulaires avant avec simplement les cases à cocher, les balises Input, on retrouvait un peu près tout et il fallait tout coder après, dans la partie code pour les divers types de balises Input. Ici, avec les Web Forms et la partie HTML5 des éléments de formulaire, on va se retrouver avec tout un égrènement détaillé, les balises Input pour nos téléphones, pour les URLs, pour les mots de passe. Et donc, toute cette partie là, maintenant s'est désolidarisée de l'insertion automatique d'un label. Vous vous rappelez avant, lorsque l'on insérait un élément, on avait toujours le remplissage pour l'étiquette. Ici, l'étiquette est utilisée de manière séparée. Alors ça surprend un peu au départ. On a l'impression que ça va ralentir et en fait non, ça augmente bien le flux de travail. Parce que l'on se concentre sur les balises insérées dans nos formulaires. Et puis après, on peut intégrer uniquement les balises Label dont on a besoin. Voilà donc pour les principales mises à jour au niveau de ces palettes et menus d'insertion. Alors un petit dernier détail, c'est si on regarde du côté de l'élément commun ici et que l'on va regarder dans le menu d'insertion, on s'aperçoit que la première partie du menu reflète les éléments communs. Si je regarde ici, j'ai bien Div, Vidéo HTML5, Zone de travail. Div, Vidéo HTML5, Zone de travail. On a bien respecté le même ordre. Donc ce qui est beaucoup plus cohérent pour retrouver nos éléments à insérer. Et ensuite dans la partie basse ici, Mise en forme, Médias, Formulaire, jQuery Mobile, etc. En fait, on retrouve tous les éléments ici, de ce menu déroulant qui nous permettent de changer d'onglet. Voilà donc un réagencement on va dire, une réorganistaion de ces deux éléments le menu d'insertion et la palette d'insertion pour accroitre nos flux de travail surtout si on travail en HTML5.

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 !