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

L'essentiel de Dreamweaver CC 2017

Maîtriser les catégories de style et les réglages

Testez gratuitement nos 1336 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Grâce à la souplesse et à l'excellente ergonomie de CSS Designer, réglez et affinez les paramètres de chaque déclaration en toute simplicité. Pensez à bien séparer vos feuilles de style, ce qui en améliorera l'évolutivité.
07:15

Transcription

Pour travailler la mise en forme visuelle, on va utiliser principalement un outil qui s'appelle le css designer. Un outil remarquable car il s'adapte vraiment à nos besoins de développement. Puis surtout, il a une grande souplesse d'utilisation, au travers de ces multiples palettes. Regardons par exemple ici j'ai un header, un h1 qui a été placé dans la partie conteneur ici, principal. Et si on souhaite venir ici le stylé, on va pouvoir venir en sélectionnant ici simplement la partie ad hoc dans le css designer, agir drectement sur les propriétés. Ces propriétés on a vu qu'elles pouvaient se classifier suivant diverses catégories et la première catégorie c'est la disposition qui me permet de jouer sur la largeur, la hauteur eccetera. Alors, le gors intérêt ici quand je survole ici l'élément, on s'aperçoit que j'ai un doigt percé ici par une flèche qui va me permettre de pouvoir jouer sur la largeur. C'est vrai que si on est au-delà de 100% on s'en aperçoit pas sur la fenêtre rendu mais si je reviens ici vous voyez que la fenêtre ici va pouvoir se réajuster directement tout simplement de manière très souple. Vous voyez que quand je pousse, sur la droite vous voyez que la barre de défilement s'amenuise tout simpelment parce que je continue d'agrandir et Dreamweaver prend conscience que tous ces éléments-là sortent de l'écran de deviennent dans des proportions beaucoup plus importantes. Alors ici on peut utiliser ce doigt à couper mais si je double clique à l'intérieur je vais pouvoir complètement éditer et taper 33% ou toute autre valeur ça pourrait être du VW ici avec la touche tabulation je le valide et vous voyez je suis passé en 33 VW. Pour rechanger mon pourcentage, je peux en cliquant sur les unités ici revenir passer en pourcent tout simplement. ici je vais pouvoir double cliquer encore une fois taper 100% et si je passe avec la touche validation, touche entrée. Je viens de valider mon entrée, je passe ici à la suivante, et comme ça je vais pouvoir venir rentrer toutes mes valeurs, hauteurs que je souhaite. 2 petites icones apparaissent lordque je survile ici cette valeur c'est la désactivation et la poubelle. Si je désactive, regardez ce qui se passe je désactive ma largeur. C'est vrai que ici, désactiver 100% on s'en aperçoit pas trop, je vais revenir sur une valeur moindre ici mettons 25%. et je vais la désactiver. Vous voyez quand je désactive, ça replace en automatique donc ça redonne la main à l'affichage naturel du flux. Ici on s'aperçoit que dans le style css, j'ai un commentaire qui a été placé au travers de la valeur de 25% qui dit en gros ça a été désactivé. Mais pouir préciser que c'est Dreamweaver qui l'a désactivé, il y a le mot disable qui a &été rajouté ici par Dreamweaver pour dire voilà j'ai pris la main dessus, c'est une désactivation. Si maintenant, je viens directement sur la petite poubelle ici, si je clique vous voyez carrément la ligne est retirée c'est-à-dire que c'est au-delà du disable c'est vraiment on a plus pris en compte,on prendra plus en compte cette valeur-là. Si toutefois je fais un Ctrl Z, vous voyez que le disable revient. Si je continue Ctrl Z, je passe à 25%. Ctrl Z à 19, Ctrl Z à 100% . On est toujours dans du code malgré que ce code soit piloté par le css designer. Donc le Ctrl Z reste toujours accessible et on va pouvoir continuer vraiment à travailler cmme si on était en produciton directement dans le code. Alors on va ller un petit peu plus loin aussi au niveau de l'utilisation de cs designer. Ici on s'paerçoit que dans les sources, on a soit toutes les sources, soit directement que la feuille de style sur laquelle on a activé puisqu'on est venu dans cette feuille de style dans le détail. Mais si je reviens sur mon code source, on voit bien que j'ai 2 feuilles de style. Alors je vous préconise de travailler avec autant de feuilles de style que nécessaire et puis après au final vous pourrez utiliser un outil ciomme grunt ou gulp par exemple ui vous permettra de pouvoir rassembler l'ensemble de vos fichiers css en un seul. Ou vouspouvez utilsier des outils en ligne ou le faire manuellement. Mais ça va vous pemettre de travailler de manière beaucoup plus éclatée beaucoup plus égrainée, beaucoup plus souple pendant l'évolution de votre projet. Donc d'utiliser plusieurs feuilles de style et non pas une seule. Donc ici si je regarde dans la partie première fuille de style, qu'est-ce que j'ai ? J'ai l'ensemble des positionnements de mon document c'est-à-dire, toutes les balises, le body le header. Mais si je viens dans le css, je ne travaille que sur la partie du header. Ici pas besoin de venir dans la feuille css pour travailler dessus, je peux rester dans la partie code source et venir basculer ici maintenant dans la partie css1 css2. Vous voyez qu'ici en css 2, j'ai que les éléments de header qui vont me permettre de venir travailler. Si par exemple ici je prends le header h1 on s'aperçoit qu'automatiquement il est sélectionné dans cette partie. On voit notre titre donc c'est très adapté très intituitif que d'utiliser ces outils. Ici , on pourrait se dire que on ne veut pas utliser les tracteurs rouillés mais on veut utiliser une icône, un logo de la société ou de l'évenement ici on va pouvoir prendre dans la catégorie backgrounds, d'arrière plans. Donc on va automatiquement basculer dans la partie arrière plan, voilà et une fois basculé dans la partie arrière plan, ici au niveau de venir définir de ce puit de couleur ici une couleur d'arrière plan, on peut également définir une url donc une image qui serait utilisable pour cet arrière plan. Donc si je passe dans le chapitre 6 ici, qui correspond à la partie 4, pour ma partie logo ici je vais pouvoir venir récupérer le logo et le joindre directement à mon image. On s'aperçoit maintenant que mon logo est utilisé en taille réelle et se multiplie dans les utilisations mais vous voyez ici dans les backgrounds, repeat on va pouvoir utiliser soit un repeat soit un repeat x soit un repeat uniquement vertical donc y soit on utilise no repeat et à ce momen-là on n'a pas de répétitions dans nos éléments. Ensuite, on va pouvoir comme ça demander à l'élément de se positionner à l'intérieur de la largeur qu'on a défini donc pour ça on va utiliser le background size et dans le background size, on va pouvoir utiliser la valeur contain pour le positionner. Il nous reste le texte. On va pouvoir venir ici demander d'avoir une indentation qui serait égale à moins 9999 pixels. Pourquoi 9999 et pas 10000 ? Parce que quand on fait une lecture rapide en diagonale, on s'aperçoit que c'est un dégagement de texte et que c'est pas une marge ou une indentation qui serait visuellement perceptible mais au contraire c'est vriament pour dégager le texte à l'extérieur dans une zone qui serait non visible. Voilà donc ici on a bien cette partie-là. On peut venir avec le css designer dans la partie déposition maintenant, venir jouer sur les marges, marges hautes vous voyez en temps réel on voit le rendu donc on peut ajuster soit de manière très précise au pixel près ici en tapant 4 pixels ici soit en utilisant cet élément qui va nous permettre de pouvoir définir de manière très visuelle le positionnement et les marges de notre logo ici dans la partie du rendu de la page. Donc, un css designer encore une fois qui est très ergonomique qui nous permet de travailler aussi bien dans la partie code que dans la partie visuelle en utilisant ces multiples palettes. Les outils eux-mêmes sont des outils tresè visuels ou qui permettent de taper le code directement. donc vous voyez vraiment un outil qui s'adapte à nos flux de production , à nos besoins et qui reste en plus extrêmement convivial d'utilisation.

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 !