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

L'essentiel de Dreamweaver CC 2017

Revoir l'interface du document

Testez gratuitement nos 1344 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Revenez sur l'interface du document pour mieux appréhender la relation entre HTML, CSS et JavaScript. Grâce à l'interface de Dreamweaver ou à l'éditeur de code, interconnectez-les et basculez de l'un à l'autre.
05:51

Transcription

Avant d'entamer ce chapitre sur la gestion des documents au sein de Dreamweaver, revenons quelques instants sur l'interface-même du document et voyons un peu son comportement en fonction des trois natures de documents que l'on peut utiliser, c'est à dire HTML, CSS et Javascript. Revenons. Ouvrons un document HTML, créons un nouveau document de type CSS, et créons un dernier document de type Javascript, voilà. Donc ici on a le triptyque, on va dire, d'utilisation quotidienne d'un site qui ne serait pas basé sur de la technologie serveur. Alors, bien entendu qu'on pourrait très bien créer un nouveau document de type PHP, maintenant ici, pour travailler sur une technologie serveur, mais dès l'instant là il me dit attention, là il te faut un serveur d'évaluation au moins pour nous permettre de travailler avec ce type de document. Donc ça je vous propose qu'on le relègue un peu plus tard dans les tâches de travail de cette formation, et que pour l'instant, on botte en touche on ne le fasse pas. Voilà, donc ici je vais fermer ce document de niveau quatre, qui est le document de type PHP. Alors, pour le document HTML, je fais un Control-S, je l'enregistre, et je vais l'enregistrer ici, dans le chapitre quatre, ici, dans cette formation-là, et je vais lui donner le titre « 1368_04_01 ». Voilà, je l'enregistre. Je vais faire pareil pour le CSS, Control-S, et vous voyez que par défaut il va prendre l'extension .css, ce qui est tout à fait normal, et je vais faire pareil pour le fichier Javascript, qui lui prendra l'extension Javascript directement, voilà. Donc, j'enregistre, et voilà, cela est placé. Donc maintenant que les trois fichiers sont placés, ce qui m'importe c'est de les mettre en relation directement depuis l'interface du document. Alors, on a deux possibilités. La première c'est d'utiliser directement l'environnement de Dreamweaver, donc pour cela, on va passer dans la partie HTML, dans la partie commune, ici, et, au niveau du document, je vais placer mon curseur juste en dessous du titre ici, et je vais prendre ce petit icône ici, script, dans l'onglet HTML, ici dans la palette d'insertion, Script, et là je vais pointer vers le script. Pour placer maintenant un fichier CSS, je peux passer par le CSS Designer, ici venir dans les sources, et dire je vais ajouter une source, et je vais joindre un fichier existant, ici je vais le lier ou l'importer. Alors, je vous recommande pas d'utiliser la balise Import, on verra ça plus tard, mais on va pouvoir utiliser directement la balise lien, ici, on parcourt, et on prend le fichier .css. Je fais OK, voilà, et je n'ai plus qu'à dire OK directement. Et j'ai pu lier mon fichier CSS Maintenant j'ai mon document ici, HTML, ici j'ai mon document CSS, je vais pouvoir créer une classe, par exemple fond et dans cette classe-là je vais mettre un background, et vous voyez que j'ai tous les outils d'aide à l'écriture qui apparaissent, on reviendra longuement sur cette partie plus tard, quoi. Lightgray, je vais pouvoir utiliser. Et là vous voyez, vous avez lightgreen, lightgrey, alors, je vais prendre lightgreen, peut-être, pour qu'on le voie mieux. Voilà. Voilà, je valide, ici, point-virgule. Et je peux rentrer dans la partie Javascript. Alors, je vais fermer ces documents-là, maintenant. Plutôt que de travailler avec eux directement. Regardez, ici je suis sur mon HTML, ici j'ai mon Javascript, ici mon CSS. Et vous voyez, je peux directement basculer des différentes sources de travail pour pouvoir me promener dans la partie nécessaire, en fonction des fichiers que j'ai besoin d'affecter. Et là, au niveau de la partie Javascript, je vais rajouter du javascript, Alors, si vous ne connaissez pas ce langage, je vous invite à vous rapprocher de notre catalogue au niveau des formations Javascript de base, au moins, mais rassurez-vous, on aura pas vraiment besoin d'utiliser du Javascript tout au long de cette formation, c'est vraiment pour pouvoir montrer l'interconnexion entre les divers documents et l'interface de Dreamweaver. Ici donc je vais faire un document body, je vais récupérer la partie body, et je vais dire à cette partie body, voilà, ici je vais faire un body.classname. Et vous voyez que, au fur et à mesure que j'écris, l'aide me permet, vous voyez, ici, dès que je commence à taper dans le code, classname, me dit c'est un « string, gets and sets the value of the class attribute of the specified element ». Voilà, donc ça me parle, ça m'indique ce que je suis en train d'écrire. C'est assez sympa là-dessus pour ce genre de gymnastique-là, voilà et ici je vais lui dire, tu me rajoutes la classe .fond. Et ici, toutes les erreurs m'indiquent les types d'erreurs que je vais rencontrer ou que je rencontre lors de l'écriture du code, donc là il m'indique qu'il manque un semicolon. Il suffit que je rajoute un semicolon à la fin, j'enregistre le document,, et vous voyez que l'erreur disparait ici. Voilà, donc ici tout a été placé, et si je suis en mode en direct, ici, il suffit que je fasse un petit F5 pour recharger ma page, et vous voyez que le lightgreen est déjà placé directement sur cette interprétation du code, donc. Ici, j'ai bien mon code source qui me permet de travailler sur la partie HTML ici, le Javascript, ici le CSS. Alors, vous avez vu que la première méthode de travail, c'était de rajouter ces deux balises-là en utilisant l'interface de Dreamweaver on aurait très bien pu faire ça en utilisant les parties de code, ici. Il suffit que je valide ma balise script, ici, je vais pouvoir entrer un src. Si je valide src, vous voyez que j'ai un petit menu déroulant qui me dit, lequel veux-tu de ces derniers scripts que tu viens de taper ? Je vais lui dire, je veux celui-ci. Et si je tape le link, ici, je valide avec la touche Tabulation, pareil, Control-Espace, Command-Espace sur Macintosh, pour avoir cette petite boite de dialogue qui apparait et ici je peux valider également et donc voilà, je vais pouvoir aussi relier des documents les uns aux autres en utilisant soit la partie code soit la partie interface globale de Dreamweaver.

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 !