L'essentiel de Dreamweaver CC 2017

Prendre en main l'éditeur de code

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Faites un rapide tour d'horizon du paramétrage et de la configuration de l'éditeur de code. Grâce aux diverses catégories de préférence, vous pourrez affiner le fonctionnement de l'éditeur à la main.
06:05

Transcription

Il suffit de créer un document HTML, de passer en mode fractionné ou en mode code complet pour s’apercevoir que l'éditeur de code, est une partie majeure quand même de l'interface de Dreamweaver. Alors vous avez 2 modes d'édition de codes vous avez l'affichage du code ici qui est solidaire on va dire du mode d'affichage, qui est un complément de ce mode là, mais vous avez également depuis le menu Fenêtre, la-haut, accès à la possibilité d'accéder à ce qu'on appelle un inspecteur de code, ou le raccourci clavier F10. Donc là vous êtes dans un inspecteur de code qui va vous permettre de travailler également de manière indépendante, si des fois vous étiez dans un mode de rendu en direct, voyez qu'ici cette palette est toujours devant et vous pouvez continuer à taper dans le code pour pouvoir en temps réel continuer à interagir avec le système. Donc à vous de voir, comment vous allez pouvoir vous positionner de ce côté là et quel sera le côté ergonomique le plus favorable à votre fait de production. Dans les préférences du système, quasiment donc de l'application ici, vous avez plusieurs informations très importantes au niveau du code, vous avez ici le format de code qui va vous permettre de définir ici si vous avez une indemptation ou pas, est-ce que vous utilisez deux espaces, ou est-ce que vous utilisez une tabulation ou quatre espaces c'est à vous de voir comment vous allez pouvoir indempter de la même manière votre code ou en fonction de ce que vos équipes vont travailler. Les tailles de tabulations sont définies, mais peuvent êtres insérées sous forme d'espace, c'est à dire que vous allez utiliser de la tabulation pour indempter mais vous allez rester dans un standard de 4 espaces, donc qui donnera une corrélation beaucoup plus facile entre les deux types de développement, en fonction des équipes. Est-ce que vous utilisez Emmet ou pas? Dreamweaver intègre Emmet par défaut, donc vous pouvez le désactiver, si vous le souhaitez mais c'est vraiment quelque chose que si on a goûté, on ne décoche plus la case. Vous pouvez gérer la manière dont les retours chariots sont mis en place, donc si vous travaillez avec des environnements Mac Intosh ou UNIX vous pouvez vous harmoniser sur ce point de vue là. Les balises TD, dans certains cas, Les balises TD peuvent inclure un retour chariot, ce qui est pas intéressant d'un point de vue lisibilité donc vous pouvez bloquer là-dessus. Vous pouvez venir gérer de manière avancée l'ensemble des bibliothèques de balises, c'est à dire donc on le verra, par exemple quand vous utilisez la balise A, l'Access key qu'est-ce que c'est, et bien ça va être la valeur qui va être donnée, c'est du texte, maintenant, si vous souhaitez que ça ouvre un éditeur de code de couleur par exemple, au lieu de mettre texte, vous mettrez couleur, et chaque fois que vous cliquerez, et bien ça ouvrira l'Access key, un éditeur couleur, plutôt qu'un string. Alors aucun intérêt de faire ça mais vous voyez que tout est personnalisable à souhait au niveau de l'éditeur. La taille minimale de pliage de code, c'est lié aux petits onglets qui nous permettent de compacter le code et il faut avoir au minimum 2 lignes pour pouvoir utiliser un compactage. Ensuite, au niveau de la partie interface ici, vous avez la possibilité de choisir la couleur d'interface, donc la couleur, de l'IDE, donc de très clair à très foncé, mais vous avez la possibilité d'utiliser la couleur de thème, donc vous pouvez écrire du code en light ici, et si je l'applique vous voyez je vais écrire sur une partie blanche, et si je prends Dark, je vais écrire sur une partie obscure, pour l'instant dans Dreamweaver on a que ces deux modes de coloration, par le futur il va en venir d'autres, mais pour l'instant il y a que le mode Dark ou le mode Light. Vous n'avez pas trop le choix à ce niveau là. Vous avez quelques paramètres au niveau des conseils de code ici, la possibilité de fermer la balise HTML dès que vous avez commencer à taper le crochet de fermeture slash ou directement dés que vous avez fini de saisir la balise d'ouverture, ça c'est sympa aussi, ça replace le curseur au milieu, ou sinon jamais, c'est vous qui contrôlez, c'est à vous de voir. Vous voulez activer les indicateurs de code, et les infos à bulle descriptives, on va les laisser cochées, c'est vraiment intéressant, par contre si ça commence à vous nuire, et bien vous pouvez les désactiver, vous savez où ça se passe. Ensuite, au niveau de la correction du code je vous invite à venir voir et à adapter en fonction de vos besoins les divers paramètres, c'est plutôt pour l'encodage des caractères donc, je trouve que les valeurs par défaut sont assez sympathiques, Après c'est à vous de voir qu'est-ce que vous préférez à ce niveau là, Au niveau du Linting, c'est à dire la proposition d'erreur automatique, elle est activée par défaut, et vous pouvez venir modifier les règles langage par langage, entre le css, le HTML et le javascript, et donc pour pouvoir éditer et appliquer les modifications, vous allez vérifier les valeurs de chacun de ces paramètres, et vous allez les corriger en mettant True ou False. Vous pouvez effectuer une recherche sur Google, en tapant HTML lint, css lint et js lint pour avoir l'intégralité des descriptions de chacun de ces paramètres voir comment on va pouvoir les paramétrer, quels seront les cas de figure les plus intéressants donc vous avez pour le css et pour le js également. Ensuite, au niveau des autres préférences, je vous conseille de venir du côté des polices pour pouvoir régler les tailles de police les plus adaptées à votre code d'écriture mais sachez que si vous faites un Contrôle+, Contrôle- vous allez pouvoir les augmenter directement à la demande de l'interface. Et enfin quelques informations aussi à venir voir du côté du style css pour pouvoir régler tout par lui-même, je vous invite à venir le parcourir. Alors ici comme je vous le disais, si vous faites un contrôle + ou contrôle - un contrôle 0 vous réinitialisez afin de pouvoir mettre vos typos en fonction de vos besoins de visibilité sur le moment. les petites flèches qui permettent de compacter le code ici, voila, directement, elle vont apparaître dès qu'il y a deux lignes, vous pouvez demander deux ou trois lignes, sachez qu'une fois que vous avez contrôlé quand vous survolez vous avez le contenu de la balise qui s'affiche, qui vous permet donc d'avoir de l'information la-dessus, par défaut toutes les informations sont nommées, et les erreurs d'écriture, par exemple si je manque une erreur ici, le linting va pouvoir apparaître ici directement sur le côté, en partie rouge, donc ici si j'enlève la fenêtre de fermeture, voila, le body est ouvert, il est pas fermé, on va vous demander la complainte voila, ici si on l'enlève, la complainte va s'écrire en rouge sur le côté pour pouvoir vous donner des erreurs, et ici vous aurez les erreurs qui vont s'afficher une fois cliqué par dessus cet élément ça vous ramènera directement à l'erreur.

L'essentiel de Dreamweaver CC 2017

Prenez en main l’environnement de travail de Dreamweaver. Créez des documents, utilisez les CSS, gérez les liens hypertexte, les fichiers multimédia, les formulaires, etc.

7h28 (98 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :30 janv. 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 !