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

Dreamweaver CS6 : Les nouveautés

Utiliser les fontes dans Dreamweaver

Testez gratuitement nos 1334 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Mettons donc en place une description Font-family qui va utiliser le jeu de famille contenant une typo importée. Nous allons voir que Dreamweaver gère intégralement tout le processus en écrivant pour les règles nécessaires et en important dans le site les fichiers nécessaires.
04:18

Transcription

Les typos ont bien été intégrées à Dreamweaver depuis le nouveau gestionnaire de polices Web. Les familles de police ont été créées et réalisées afin de pouvoir proposer cette typo au travers de la règle @font-face, il ne reste plus maintenant qu'à l'utiliser. Alors ce que je vous propose de faire c'est ici depuis l'élément body de venir choisir justement ce jeu de famille qui a été réalisé avec une typo @font-face, enfin une typo importée et gérée par Dreamweaver CS6. Alors voilà je vais simplement utiliser uniquement cette règle pour qu'on puisse voir ce qui se passe au niveau du code CSS et je vais faire OK. Dès l'instant où j'ai fait OK, vous voyez qu'instantanément c'est passé en mode direct. Dreamweaver utilise cette typo. Alors est-ce que c'est la bonne ou pas ? Je ne sais pas. Il va falloir passer par En direct et vous voyez que ce n'est pas la bonne. Donc en Non direct c'est de la typo de remplacement qui est utilisée, on a bien fait de passer par un jeu de famille qui nous permet de pouvoir contrôler la typo, ne serait-ce qu'en travaillant dans Dreamweaver sans être en mode En direct. Par contre, vous voyez que directement en mode En direct, on utilise bien la typo AurulentSans qui a été embarquée. Alors si je regarde du côté de la palette des styles CSS, ici, j'ai une feuille de style CSS qui a été rajoutée. Alors ici c'est un style embarqué dans la page, ce n'est pas une feuille de style détachée, donc c'est dans la balise style. On va pouvoir atteindre le code et venir le voir. On va passer en code plein pour mieux le voir, ou en fractionné ça suffit. C'est suffisamment large, voilà. Voyez ici que dans la balise style a été rajouté ici une balise @import url qui contient notre fameux dossier web font que l'on avait créé. Et ce fameux dossier web font qui est toujours ici et qui est géré, rappelons-le, dans les paramètres avancés du site par cette information-là qui contient le chemin d'accès aux polices que l'on souhaite utiliser. Et ici la typo a été embarquée pas sous forme de typo elle-même mais sous forme de feuille de style CSS, d'où ici style CSS, style sheet. OK. Grâce à Dreamweaver, on peut attaquer directement les fichiers apparentés donc allons voir ces fichiers apparentés. Et là, vous voyez que la règle @font-face a été décrite : font family. On utilise AurulentSans Regular. La source se trouve dans ce fichier-là pour le fichier EOT. Pour les autres fichiers, vous avez ici directement toutes les informations nécessaires avec le format qui est défini, le type MIME qui a été placé. Ici pareil pour le WOFF, le TTF et le SVG. Donc toutes les informations ont été portées directement dans la feuille de style CSS qui a été rajoutée par Dreamweaver. Ce qui fait que maintenant, avec ce nom ici AurulentSans Regular, font family, dès l'instant où je vais utiliser dans une description classique une famille de font ici, la page web va savoir où aller récupérer cette information et les fichiers nécessaires. Alors si maintenant on regarde ici dans la partie webfont, on voit bien que la typo Aurulent a été rajoutée. Si je fais un clic droit avec le menu Explorer pour venir voir le dossier, ici vous avez l'intégralité des fichiers nécessaires qui ont été placés. Alors comme je n'utilise que la Regular, il n'y a que la Regular. Il n'y a pas la bold, l'italique, l'italique bold, etc. qui a été installée. La feuille de syle CSS que je vais utiliser est directement placée là. Et moi ce que je vous inviterais à faire, puisque vous avez placé cela en ligne... Rappelez-vous lors du décompactage du dossier téléchargé, ici, on avait tous les fichiers nécessaires pour la typo y compris le contrat de licence d'exploitation de cette typo. C'est de faire un clic droit ici et de venir le copier, pas le déplacer, gardez-le également ici et placez-le en ligne également de façon à toujours l'avoir sous la main, si besoin était, vous aurez toujours ce fichier qui y est avec les typos qu'il représente. Voilà, donc Dreamweaver CS6 intègre toute une mécanique qui permet de pouvoir manager, ici, des polices web directement au sein de l'interface de Dreamweaver, de pouvoir créer des familles de polices et une fois que vous allez les utiliser depuis l'espace du site, de pouvoir rapatrier tous les fichiers nécessaires dans le dossier webfont et puis de pouvoir créer l'intégralité du code CSS nécessaire afin de mener à bien cette opération.

Dreamweaver CS6 : Les nouveautés

Allez à la découverte des nouveautés de Dreamweaver CS6, qui gravitent autour du développement d’applications mobiles, de la pluri-distribution et de sites Internet réactifs.

3h16 (40 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :23 avr. 2012
Mis à jour le:5 avr. 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 !