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

Détailler l'espace du document

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
La richesse de l'interface du document est telle qu'elle peut paraître complexe. À l'usage, vous vous apercevrez rapidement qu'elle est très bien adaptée à vos besoins et à votre flux de production. Prenez le temps de l'étudier en détail.
06:30

Transcription

L'espace Documents est placé, disposé au centre de l'interface applicative de Dreamweaver, et il occupe le plus de surface. Le document se présente sur deux parties. Comme on l'a vu, la partie rendu, tout ce que va nous rendre le navigateur, et la partie code, quelle est la structure qui le compose et l'ensemble du document accessible. Cet affichage peut être multiple. Là, pour l'instant, il est vertical, avec le rendu à gauche, le code à droite, mais on a la possibilité de pouvoir modifier ces informations. On peut demander de le fractionner par exemple horizontalement, et demander l'affichage en direct à gauche. Ce qui veut dire que si je décoche cette partie-là, on va inverser complètement la manière de disposer. On a la possibilité également de le changer au niveau horizontal, c'est à dire d'avoir la partie rendu en bas, la partie code en haut. Ou encore, on peut rechanger dans le fractionnement, ici, l'affichage en direct en haut. Donc c'est à vous de configurer cet environnement comme il sera le plus confortable pour vous pour travailler. Pour ma part, je préfère avoir le code à droite ici et d'avoir la partie de rendu sur la partie gauche. Libre à vous d'adapter, de modifier. Donc le document est constitué, si on le souhaite, par deux aspects, deux parties. Mais on va pouvoir se focaliser que sur la partie du code, sélectionnant ici la partie code, et on aura accès qu'au code. Bien entendu, on peut reprendre la partie en direct, et utiliser la partie en direct. Que l'on soit dans la partie en direct, la partie code ou la partie création, ici, on peut utiliser les palettes, les outils et continuer à développer. Ici par exemple, si je souhaite rajouter un point, rien ne m'empêche de double-cliquer, de venir rajouter un point. Ou de le supprimer. Ou d'accéder à toute autre partie de travail, qui serait contextuelle avec un clic droit. Par exemple ici je vais pouvoir copier, utiliser un Quick Tag Editor, donc ajouter d'une partie de code. Je vais pouvoir comme ça rentrer dans l'explorateur de code à ce niveau-là, et avoir des informations supplémentaires. Bref, que l'on soit en mode code, en direct ou fractionné, on pourra réaliser presque toutes les mêmes tâches. Et dès lors que l'on va sélectionner un élément, comme ici le festival, on voit qu'il est sélectionné dans cette partie, si je sélectionne la partie historique ici, on va la retrouver sélectionnée ici dans l'éditeur. Donc dès que j'agis sur l'un, l'autre réagit, et si j'agis sur l'autre, l'un réagit. On a vraiment une interconnexion très souple entre ce que l'on voit, ce que l'on code, et ce que l'on obtient. De même, tout document HTML est constitué parfois par d'autres documents qu'ils sont liés ou importés, comme ici par exemple cet ensemble de feuilles de style. On retrouve tous ces fichiers apparentés ici disponibles sur la barre qui est juste placée en dessous de l'onglet du document ici. Et là, sur cette barre, je vais pouvoir cliquer par exemple sur cet élément-là pour directement accéder à ce fichier et pouvoir le modifier également. Donc quel que soit le fichier que je vais utiliser, qu'il s'agisse de CSS, de PHP, de JSON, de Javascript, dès l'instant où il est en relation avec le document source HTML, on a toujours accès à ce document depuis la barre des fichiers relatifs. Ici on a la possibilité de cliquer et d'avoir tous les documents qui n'apparaitraient pas de manière visuelle. On peut bien entendu les faire défiler par les flèches, ici, mais ça n'a besoin d'accéder directement mettons au menu numéro sept, main css, il suffit de cliquer et on peut accéder à ces éléments. Il est possible également de pouvoir filtrer ces éléments ici en demandant - alors ici je n'ai que des fichiers CSS, ça va être difficile de filtrer par CSS. Des fois vous avez des fichiers de type PHP, Javascript, CSS, et que vous ne voulez travailler qu'avec les fichiers Javascript, il suffit de sélectionner ce type d'extension et de pouvoir filtrer à ce niveau-là. Ou d'utiliser un filtre personnalisé, qui va vous permettre de filtrer les documents. La barre centrale du document est complètement repositionnable, on va laisser plus d'espace donc au navigateur. ou à la partie de rendu, mais voyez ici vous avez une petite poignée qui va vous permettre de pouvoir réajuster la largeur de la page pour se dire, qu'est-ce que cela donnerait si je travaillais sur une tablette qui aurait cette largeur ? Et qu'est-ce que cela donne si je travaille sur un écran qui est un peu plus grand ? Donc le fait de redimensionner la séparation entre le code et le rendu n'est pas limitée à cette séparation, on va pouvoir réagir grâce à cette fenêtre pour pouvoir positionner le rendu de notre site dans un contexte qui nous serait plus adapté. Enfin, dans la partie basse du document, ici on a toute une série d'informations, comme ce petit icône vert qui nous dit qu'il n'y a pas d'erreurs rencontrées. Ici on va pouvoir changer le format de fichier du code utilisé. Ici on va pouvoir changer les fenêtres de disposition d'affichage directement en agissant sur des valeurs prédéfinies. On va pouvoir travailler en mode d'insertion ou en mode d'incrustation. Et enfin ici on va un peu avoir des aperçus en temps réel. On reviendra sur cette partie plus en détail dans une étape dédiée. Enfin, un dernier petit élément c'est que dès l'instant où je vais être sur du code source, ici, quand je vais sélectionner un noeud HTML à l'intérieur de l'arborescence, j'ai toute l'ancestralité qui va s'ouvrir ici devant moi et qui devient interactive. C'est à dire je peux accéder directement à la balise nav et la sélectionner, ou à la balise div conteneur qui la sélectionne au dessus. Donc vous allez pouvoir avoir une arborescence qui va vous permettre de travailler directement soit avec un clic droit sur cette balise, soit en cliquant dessous d'y accéder directement et dans la partie code, et dans la partie rendu visuel. N'oubliez pas que sur l'onglet principal du document vous avez la possibilité de faire un clic droit et d'accéder à un menu contextuel propre au document, et un clic droit sur un élément relatif va vous permettre de l'ouvrir comme un fichier autonome et séparé, distinct. Enfin, dernier élément, qu'on avait déjà vu dans une étape précédente, c'est que, en fonction de l'état d'activation, si je suis dans la partie code ou si je suis dans la partie de rendu, les outils vont s'adapter contextuellement à nos besoins et donc vont être modifiées. Voilà donc une interface de document qui est riche, qui est complète, qui peut paraitre complexe dans un premier temps, mais qui, avec l'habitude et l'utilisation, va nous être vraiment utile, va accroitre nos flux de production, en nous permettant de travailler dans un environnement qui soit à la fois convivial et très ergonomique.

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 !