L'essentiel de Dreamweaver CC 2017

Travailler en mode aperçu direct ou affichage

Testez gratuitement nos 1246 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Découvrez deux modes d'affichage de document. Le rendu direct vous permet d'afficher la page comme un navigateur de type webkit, et, en mode création, elle reste dans un état quasi brut.
04:59

Transcription

Par défaut, les documents s'ouvrent en mode en direct. C'est à dire, en mode de rendu tel que cela pourrait être dans un navigateur, et ici le navigateur en l'occurrence, le moteur de rendu, est un moteur Webkit de dernière génération. Donc ici, tout ce qui se passe dans cette fenêtre sera apparenté à ce qui se passerait dans Safari, voire dans Chromium. Maintenant, vous avez toujours la possibilité de désactiver ce mode de rendu en direct et de passer en ce qu'on appelle un mode de création. Alors, parfois cela pose soucis, parfois cela est vraiment intéressant. Le mode création n'a aucun rendu. Il va rendre un HTML brut de décoffrage, un peu comme un navigateur l'afficherait si aucune feuille de style CSS n'était affectée à ce document, mais en plus on va avoir des petits cadres de délimitation qui vont nous permettre de sélectionner le cadre parent, ici le fameux header, et puis si je passe à l'intérieur, je vais pouvoir sélectionner le nav, et puis ici venir essayer de récupérer le h1. Mais voyez que en sélectionnant les éléments directement soit depuis le code, soit depuis l'interface ici, qui reflète l'arborescence, les balises d'arborescence, je vais pouvoir venir sélectionner l'ensemble de ces éléments de manière beaucoup plus on va dire simple au niveau structurel. Voilà, et donc en sélectionnant n'importe quel élément, et ce que je sois en mode création ou en mode d'affichage en direct, je reflète directement l'arborescence ici dans partie basse du document, ici. Donc ici, je vois bien que je suis sur un élément a, mais je peux remonter à l'élément li, je peux remonter à l'élément ul, et vous voyez que instantanément tout se reflète. Que je sois dans le mode en direct ou dans le mode création. Ici, voyez, ici je suis sur l'élément a, là, le li, le ul. Et voyez, vous allez comme ça pouvoir remonter et sélectionner tous les éléments. Si vous voulez sélectionner la balise h1 entière, il suffit de cliquer n'importe où dans l'interface, de voir ce h1 et de le sélectionner ici. Si je suis en mode de rendu en direct, ça va être exactement pareil. La seule différence qu'il va y avoir c'est que ici, dans le mode en direct, je vais avoir un petit plus et un petit outil ici, un petit hamburger qui me permet de modifier les attributs les plus proches de la balise sur laquelle je me situe. Donc regardez : ici si je passe en mode fractionné, plutôt, dès l'instant où je vais prendre un lien, ici ce lien a, je vais pouvoir lui attribuer une classe. Alors, ici sur le lien a, je n'ai pas du tout d'éléments, d'attributs qui pourront être modifiés sur le a, ici. D'accord ? Il faudra que je passe par l'inspecteur de propriétés ici pour avoir différentes informations sur ce a. Mais ici ce qui m'importe c'est que, regardez la classe, il y en a aucune, je vais pouvoir venir attribuer une classe. Et pour attribuer cette classe, je vais commencer à taper. Je vais taper l, par exemple. Et là, Dreamweaver me dit, oui, je te propose une classe lien, parce que si je viens maintenant dans le CSS, j'ai bien une classe lien ici. Regardez, si maintenant je reviens ici et que je tape une classe et je tape « on », il me dit moi j'ai fond avec ça. À non, alors, c'est pas ça. Si je tape « ien », il me dit oui, j'ai des liens. Je vais pouvoir avec les flèches basculer sur ce lien. Avec la touche Tabulation, je vais pouvoir la valider. Et là je viens d'affecter une classe lien à cette balise a. Maintenant que j'ai la classe lien, quand je sélectionne la balise a, si je viens survoler ce petit élément lien je vais pouvoir la retirer. Voilà ; on reviendra plus en détail sur l'utilisation de ces outils quand on verra la palette de DOM, ici cette palette-là qui va me permettre également de pouvoir localiser de manière interactive la situation géographique, enfin dire dans l'arborescence du document la manipulation, même, parce que regardez. Vous avez vu, il y a une petite main qui me permet de prendre cet élément et de le déplacer, voyez, vous avez des petits marqueurs. Donc on reverra toute cette partie-là ensuite, mais ce qui est important de voir c'est que vous avez un aperçu en direct qui vous bloque pas le document, c'est comme si vous étiez en real time sur un navigateur, donc vous voyez vraiment ce qui se passe au niveau du navigateur. Mais vous avez la possibilité de manipuler le contenu comme bon vous semble, et comme il vous faut agir en fonction de vos objectifs de mise en page. Maintenant vous avez un mode complètement dénudé qui va vous permettre de travailler purement sur la base du document. Vous avez encore accès à cet élément, puisque vous pouvez venir sélectionner tous les éléments de manière interactive également de la même manière. Vous allez pouvoir vous situer à la fois dans le DOM, dans le document et dans le code source ici. Vous voyez, tout est interactif, aussi. Mais vous avez pas certaines souplesses de rendu et des petits outils de palette comme on peut avoir ici en mode rendu en direct dès qu'on sélectionne un élément.

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 !