Dreamweaver CS6 : Les nouveautés

Utiliser le gestionnaire de thèmes en ligne

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Une des premières nouveautés de Dreamweaver CS6 sur l'utilisation de la librairie jQuery mobile réside dans la souplesse de modification des thèmes utilisés. Nous allons introduire deux possibilités pour préparer ces thèmes , jQuery Theme Roller et Fireworks CS6.
07:02

Transcription

Dreamweaver CS6 va nous permettre maintenant de pouvoir personnaliser le thème directement de cette page Alors, il existe plusieurs manières pour arriver à cette fin. On va commencer par voir une version en ligne, qui est le ThemeRoller proposé par la librairie jQuery. Donc ici sur le site ThemeRoller index, on va pouvoir arriver sur une interface principale qui va nous permettre déjà de proposer plusieurs thèmes. Alors, ce qu'il faut savoir, c'est que les librairies jQuery sont réparties sur des thèmes A, B, C, D. Alors il est très simple de comprendre l'utilisation de cette interface. Ici, j'ai mes trois thèmes A, B, C, et je peux en rajouter autant que je veux, D, etc. Et chaque fois, je vais pouvoir venir personnaliser les thèmes par les couleurs. Soit je le fais au coup par coup. Donc ici, par exemple, je vais pouvoir venir choisir la couleur de texte donc dans ma roue chromatique, je vais pouvoir prendre par exemple ici, je vais chercher un thème. Vous voyez qu'ici, la couleur de thème s'affiche. Une fois que c'est validé, je vais pouvoir aller chercher la couleur de l'ombrage du texte, la couleur de l'arrière-plan maintenant. Donc ici, on va pouvoir y faire un petit effet lavande ici. On va pouvoir continuer à faire, au niveau des content body ici, vous voyez que par défaut, j'ai un arrière bleu et un texte de couleur noire ici. Bien, je vais pouvoir modifier cette couleur donc on va rester par exemple dans un gris plus clair et ici un texte, on pourrait garder le même anthracite, pourquoi pas. Au niveau des boutons, on va pouvoir venir modifier cette couleur de bouton. On va revenir dans les timbres un peu plus lavande ici. Voilà, ici. On peut tout colorer intégralement. Ensuite, il y a une autre manière de procéder qui va être d'utiliser cette palette de couleurs déjà prédéfinie, pré-utilisée. Je vais pouvoir simplement la glisser-déposer comme ça sur les éléments. Et simplement, en les glissant-déposant sur les éléments, tous les éléments qui feront référence à cette couleur-là vont venir la récupérer et l'adopter directement dans la manière de présenter l'information. On peut également utiliser, si vous avez ici des comptes Kuler, vous pouvez venir utiliser vos propres comptes, vos propres réglages et partager ces nuanciers. Essayer de les utiliser directement, pareil, en glissant-déposant les couleurs comme ça. Il va suffire de les glisser-déposer pour pouvoir simplement les utiliser depuis ces éléments de couleurs. Alors, faites attention parce que certains éléments peuvent être partagés entre les librairies que vous allez proposer. Donc A, B, C, D. Une fois votre travail terminé, ici, on va dire que la librairie A m'intéresse. J'aimerais pouvoir l'utiliser. Il suffit de l'exporter, donc ici on va finir le travail donc voyez comme ça, aller plus loin dans la déclinaison. On va télécharger ce thème. Alors déjà, juste un petit rappel sur où doit-on utiliser cette feuille de styles. Comment ? Voyez, juste avant la feuille de styles "jQuery mobile structure", qui va consulter les pages et les éléments, les composants qui vont composer la page. Par contre, ici, on a la partie du CSS. Alors vous allez voir, c'est très très simple à utiliser. On va télécharger dans un premier temps le fichier ZIP. Il faut penser à donner un nom. Donc je vais l'appeler par exemple "thème 7" pour le chapitre ou "thème 5" pour le chapitre 5. Ici, je vais faire "Download ZIP" et je vais récupérer ce thème. La récupération va se faire directement dans le chapitre 5. Très bien. Je vais l'enregistrer. Et je vais pouvoir ouvrir le dossier qui contient ce fichier. Ici, je vais commencer par extraire. Voilà. Et dans "Extraire", vous voyez, vous avez les thèmes ici et l'index. L'index nous sert simplement à visualiser le thème. Donc à la limite, on n'a pas vraiment besoin de l'index, on a surtout besoin du thème. Donc ici, je vais décharger comme ça le thème. Et je vais pouvoir à la limite supprimer ces deux fichiers, je n'en ai pas besoin. Je n'en ai plus besoin maintenant. Tous les fichiers nécessaires sont contenus dans le thème et vous avez deux versions : la version CSS qui est toujours personnalisable et la version CSS minifiée, qui va pouvoir être exploitable en production parce que beaucoup plus légère. Voyez ici, par exemple, je fais 22,8 ko alors que là, je ferais 44,2 ko. Donc il n'y a pas photo, celui-là va être beaucoup plus intéressant à utiliser en production. Je peux fermer cette boite de dialogue. On peut quitter l'interface de ThemeRoller et rebasculer dans Dreamweaver. Ici, dans Dreamweaver, on retrouve exactement la même configuration. Je vais passer en mode code pur et dur. La même configuration que ce que nous a montré le ThemeRoller. C'est normal, jQuery mobile et Dreamweaver CS6 ont travaillé de pair. Et donc ici, je vais pouvoir supprimer directement cette ligne-là, voyez, on retrouve bien la structure, et la remplacer par le thème. Plutôt que de la supprimer, ce qu'on peut faire, c'est directement supprimer ce contenu. Faire "Ctrl+Espace" pour reprendre le bouton "Parcourir". Aller chercher, rentrer dans "Thèmes". Je vais prendre le thème CSS classique. Au cas où, je vais enregistrer et je vais passer en mode création. Ici, en mode création, vous voyez qu'instantanément, le site par défaut, qui est le site A vient de s'adapter directement. Et donc, si je vais voir le bouton, je crois que je l'avais mis là. Voilà, ici, les boutons, les couleurs que l'on avait utilisées pour les boutons. Alors, bien sûr, on n'a pas géré les releveurs, etc., mais vous avez compris le principe. Soit vous utilisez ThemeRoller en ligne, soit vous utilisez une autre alternative, qui serait Fireworks CS6. Fireworks CS6, proche de ce travail de collaboration entre jQuery et Dreamweaver, a proposé également dans son menu Commandes la possibilité de gérer des thèmes de jQuery mobile. Comment va-t-on faire ? On va créer un thème directement et le thème va se présenter sous la forme d'un format de fichier graphique où tous les icônes sont représentés. Il vous suffit simplement de récupérer l'icône, de le modifier, de le changer, de le colorer de manière différente. Vous avez tous les éléments ici que vous allez pouvoir personnaliser à souhait. Et une fois que vous aurez terminé cette personnalisation, il vous suffira d'aller dans le menu Commandes. Alors faites attention, vous avez toute une série ici de calques. Mais encore une fois, je faire un tantinet de place... Vous avez toute une série de calques à venir personnaliser. Donc tous les icônes ont des noms très précis. C'est là que vous allez les modifier. En fait vous allez les remplacer dans ces endroits-là. Mais n'oubliez pas que vous avez un certain nombre de pages. Vous avez la page a, la page b, la page c, la page d, etc., qui vont permettre de faire ces modifications. Au cas où vous seriez un peu déroutés, vous avez les instructions qui sont expliquées complètement sur qu'est-ce que vous devez faire, comment vous devez le faire. Tout a été extrêmement bien préparé au sein de Fireworks, par les équipes de Fireworks. Et ici, maintenant, vous allez pouvoir, depuis le menu Commandes, thème jQuery mobile, exporter un thème et récupérer le thème de la même manière que vous l'auriez fait par ThemeRoller, mais cette fois-ci, depuis Fireworks CS6. Alors voilà, une des premières nouveautés de Dreamweaver CS6 en relation avec la librairie jQuery mobile, c'est la possibilité d'apporter des nouveaux thèmes à ces interfaces, à ces éléments, à ces composantes.

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 !