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.

L'essentiel de Dreamweaver CC 2017

Utiliser les fragments de code

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les fragments de code permettent de placer rapidement des portions de code dans vos contenus HTML, CSS, JavaScript, PHP et autres. Ainsi, vous pourrez produire du code avec plus de souplesse.
04:16

Transcription

La fenêtre de fragment de code est quelque chose de souvent sous-exploité, sous-estimé, peut-être. En fait, les fragments de code vont permettre de taper rapidement une portion de code que l'on a mémorisé, que l'on a enregistré. Alors, par exemple si je viens du côté des HTML, ici, si je veux ajouter un favicon, il est vrai que je peux taper le code, mais regardez si je tape directement sur add favicon, ici, mon favicon est placé. Et vous avez vu, ici vous avez des ce qu'on appelle des touches de déclenchement. C'est à dire que si je veux placer un tableau ici, je vais pouvoir venir dans la balise table l'insérer, remplir certains paramètres,etc mais si je viens taper qtable, ici, donc je vais taper « qtable » directement, et si je fais la touche Tabulation comme pour Emmet, ici, voilà, je viens de rentrer la table. Alors, bien entendu, cette table ici elle va être préétablie à l'intérieur de ce fragment de code. Et là, elle est ici. Et donc, si vous la modifiez la prochaine fois, que vous rentrerez ce qtable plus Tabulation, mais vous rentrerez le code que vous avez écrit à cet endroit-là. Donc, de cette manière, vous pouvez très bien préparer, comme on avait vu tout à l'heure, nos propres fragments de code. Ici, vous pouvez créer des dossiers, créer des fragments, les modifier, etc. Ici on peut créer un truc qu'on appelle FILMS, ici à l'intérieur, je vais pouvoir avoir par exemple un article. Donc si je place mon curseur ici, je clique sur article, je double-clique, j'ai placé mon article qui est prêt à être intégré en foction du formatage que j'ai besoin pour ce site FILMS. Ou sinon, je peux rentrer directement des chaines Emmet. Ici, je n'ai plus qu'à tabuler, et voilà, et je vais pouvoir avoir ma chaine Emmet. Pourquoi avoir une chaine Emmet ? Parce qu'en fait, ça va me permettre de dire non, je n'en veux pas 5, j'en veux 2 ou 3. Et là, en validant, je vais pouvoir faire trois listes, et je vais pouvoir adapter, alors que si je rentrais directement un fragment de code directement en HTML, je ne pourrais pas l'éditer. Par exemple je vais rentrer ma balise aside ici, et bingo, je place mon aside très rapidement. Voilà, donc on peut faire comme ça tout type de fragment de code. Regardez : on voudrait mettre une boite de dialogue tout simplement qui affiche très rapidement mes messages. Je fais un nouveau fichier Javascript. Je valide mon Javascript, je cherche dans les fichiers Javascript dans les boites de dialogue, ici. J'ai une boite de messages, super. Je lance ma boite de messages. J'enregistre. Je cherche pas à comprendre ce qui était écrit, juste je vais regarder la fonction appelée qui est message box ici. Et donc je vais enregistrer ce Javascript ici, voilà. JS, je le valide. Je ferme ce document, je passe dans mon document HTML, ici, je vais venir placer rapidement un script ici, avec la balise d'écriture rapide, je me mets dans le script, alors ici j'aurais pu bien entendu jouer sur un autre élément de fragment de code qui ferait un window unload rapidement pour moi. Mais bon, là ça va, on va dire que c'est pas très long à faire, on peut faire un window.unload = function on met une fonction anonyme. Et là, on va placer notre message ici, on va dire par exemple « messageBox » puisque c'était cet élément, et vous voyez, puisqu'il le connait, puisqu'il l'a vu ici. D'accord, donc ici on peut faire messageBox directement de le valider, je vais passer mes paramètres. Si j'ai besoin de venir comprendre quels sont les paramètres qu'il faut écrire, je peux venir dans Édition rapide, ici et j'ai accès à ma fonction, donc voyez, c'est très rapide. On peut voir les arguments que l'on a, comment on va pouvoir les utiliser. Et maintenant je vais dire, par exemple, alors je vais passer un texte, ça sera plus - « Il est exactement %s » et là je vais dire quatre, par exemple. Je vais passer le paramètre 4. Je valide. Je bascule ici. Je fais un petit F5 pour mettre à jour. Il me dit, il est exactement 4 heures. Et voyez qu'il m'a fallu quelques secondes pour pouvoir utiliser des fragments de code pour pouvoir les utiliser directement dans ma production sans trop savoir le script qui avait été écrit. J'ai pas trop besoin de comprendre la boite noire, on va dire. On a simplement besoin de comprendre la signature de cette fonction, c'est à dire les paramètres que l'on a à passer à la fonction pour pouvoir la mettre en application.

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 !