L'essentiel de Dreamweaver CC 2017

Créer des fichiers

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dans la palette Nouveau document, vous pouvez créer un document de plusieurs façons. Partez à la découverte de certaines méthodes et assimilez les réglages indispensables pour créer des documents comportant le bon doctype et le bon encodage.
06:41

Transcription

Pour créer un nouveau document, et ce quel que soit le type de document, vous avez plusieurs possibilités. Alors, on va pas toutes les faire, parce qu'il y en a vraiment beaucoup, mais on va regarder les principales. D'abord, le menu Fichier Nouveau, avec le raccourci clavier qui lui est associé, Ctrl-N sur Windows, Command-N sur Macintosh, vous accédez à la palette Nouveau Document. La possibilité dans les fichiers récents, ici d'avoir soit Nouveau document, lorsqu'il y a pas du tout de fichiers récents qui soient affichés, soit cet onglet ici, Nouveau document, qui va vous permettre d'accéder à la même palette. Vous avez la possibilité également de faire un clic droit ici et de faire un Nouveau fichier. Par contre, faites attention, Nouveau fichier ici ça vous crée directement le fichier de type HTML et puis vous avez pas de possibilités de paramétrer quoi que ce soit de cette manière-là. Vous avez enfin la possibilité d'utiliser Démarrage rapide ici et pareil, ici, de pouvoir travailler soit avec un document HTML, CSS ou JS directement, soit, encore une fois, de revenir sur l'onglet Nouveau, ici permettra d'accéder à cette boite de dialogue. Alors, sur cette boite de dialogue ici vous avez plusieurs types de fichiers. HTML, CSS, Javascript parlent d'eux-mêmes. CSS, pareil. LESS, SCSS, Sass, ici ce sont des fichiers de préprocesseur, donc on reviendra sur une étape dédiée au préprocesseur. Ici vous avez la possibilité directement de travailler sur ces formats-là. PHP, si vous travaillez sur côté serveur, XML, JSON si vous faites du structuré, SVG, qui est une grammaire XML qui permet d'avoir un encodage de fichiers vectoriels. Et puis les modèles HTML ou PHP, on fera une partie dédiée aux modèles. Attention, ne pas confondre les modèles de démarrage avec les modèles de site et ces modèles-là. On pourra dire que ces deux éléments-là sont reliés entr'eux, et ici, c'est quelque chose de différent. Alors, pour voir les modèles de démarrage, le plus simple c'est de venir sur les modèles de démarrage ici, vous les avez tous, et vous allez pouvoir créer des pages qui sont déjà préformatées soit à base de Bootstrap, soit à base de Standard, ici, qui vont vous permettre de faire soit des pages de site directement, soit des pages pour des Newsletters, des lettres d'information que vous avez préformatées ici. Alors, si on vient dans la partie Nouveau document, si on regarde du côté du HTML, on a deux onglets. L'onglet Aucun, c'est à dire on va travailler sur une structure pure et dure HTML de base, on va tout fabriquer à la main, et ici un onglet Bootstrap. On reviendra sur une étape dédiée à Bootstrap, donc on va le laisser tomber pour l'instant. Quoi qu'il en soit, que vous soyez en modèle Bootstrap ou en modèle Aucun, ici vous avez la possibilité d'utiliser Extract, qui est une relation avec un fichier de travail Photoshop. On reviendra sur une étape dédiée là-dessus. Donc aussi, on va laisser tomber cette partie-là. Ici on va se concentrer donc sur la structure d'un document HTML, où on va pouvoir indiquer un titre de document, ici, donc « Titre ». Et vous allez pouvoir choisir le type de document. Vous voyez qu'ici par défaut il me propose du 4.01 Strict, ce qui ne peut pas être possible sur votre machine, à moins que vous l'ayez paramétrée. Par défaut, vous allez avoir du HTML5. Mais vous voyez que par défaut on peut avoir différents types de paramètres préformatés à l'origine. Ici si vous avez un fichier CSS, que vous êtes déjà en train de travailler sur un site de remplissage ou autre, vous avez la possibilité de lier ce fichier CSS comme vous lierez n'importe quelle feuille de style CSS depuis le CSS Designer ici. Il reste plus qu'à créer maintenant et ici, dès qu'on crée, on a un document voyez, HTML5, puisqu'il y a un doctype de type HTML5, et on est bien encodé en Europe de l'Ouest iso 8859-1, avec le titre de document que l'on a donné nous au sein de la boite de dialogue au départ. Ce 8859-1 vient des paramètres de préférences, ici. Si vous venez dans les Préférences, Édition Préférence sur Windows, Dreamweaver À propos de Dreamweaver sur Macintosh, vous allez avoir la possibilité de venir dans l'onglet, enfin la catégorie Nouveau document, ici, définir le type d'élément que vous souhaitez. Donc ici, vous pouvez très bien dire HTML5, comme c'est par défaut avec Dreamweaver CC 2017, et ici venir encoder en UTF 8 vos fichiers. Je vous invite également à prendre connaissance de tous les paramètres ici ici par défaut de cette boite Nouveau document. Et j'attire juste votre attention sur le fait que vous avez la possibilité d'inclure ou pas une signature BOM si besoin était sur certains types de fichiers. Par défaut il est préférable de la laisser décochée, voilà. Vous appliquez, vous fermez. Et maintenant le nouveau document qu'on va créer par défaut, HTML, est bien un HTML5 dans cette partie-là, et un UTF-8 dans la partie d'encodage. Faites bien attention, l'encodage c'est pas simplement qu'une signature qui est placée ici, il y a le fichier qui est également encodé de cette manière-là. C'est à dire que si je termine ici, si je veux repasser ici en UTF-8, ne surtout pas écrire UTF-8 ici, puisque ça changera rien, on écrira UTF-8 sur la partie charset, mais le document sera toujours encodé en 8859, et bonjour les caractères accentués, ou certains types comme ici on est pas en 15, comme l'euro, par exemple, qui seront complètement mal gérés. Donc de cette manière-là, la manière la plus simple est de revenir sur ici le document de cliquer sur l'onglet Propriétés de la page si celui-ci se trouve dans les parties de l'inspecteur de propriétés, soit de venir dans le menu Fichier Propriétés de la page, ici, et là vous allez pouvoir venir dans la partie codage venir changer ici en UTF-8 et puis demander de l'appliquer d'une part et de dire OK là vous êtes basculé en UTF-8, mais pas simplement par l'inscription ici, également sur l'encodage au niveau du fichier. De la même manière, si vous créez un nouveau document de type CSS, vous allez être encodé en UTF-8, et si vous créez un nouveau document Javascript, JSON ou quelconque, vous allez être encodé également en UTF-8, puisque ce sont les préférences qui sont demandées. Voilà donc, c'est très rapide et très simple de créer un nouveau document, et puis si vous souhaitez pouvoir faire un Control-N directement, sans avoir à passer par la case départ, vous pouvez venir dans les Préférences ici, et demander de ne pas afficher la boite de dialogue, vous l'appliquez et vous faites un Control-N, à ce moment-là vous créez directement un document plus rapidement. Par contre, vous pouvez pas faire de CSS ou de Javascript, vous allez devoir venir modifier ici les éléments de ce type-là, mais ça ne va pas changer votre document, c'est juste sa nature qui va changer. Par contre si vous faites un Control-S ici, vous vous apercevez que vous êtes toujours en HTML ici par défaut, puisqu'il a été créé de la sorte.

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 !