Dans cette leçon, vous apprendrez à ajouter des icônes de médias sociaux SVG et créer des liens à partir de ces graphiques. Afin d'utiliser pleinement toutes les fonctionnalités offertes par Dreamweaver, nous allons créer un site. Alors on va aller dans le menu du site et nous allons créer un nouveau site. Nous allons nommer ce média social. Nous allons cliquer sur l'icône du dossier pour parcourir pour le dossier et nous irons là où il se trouve vous avez les fichiers de cours pour le module six et là-dedans, il y a un dossier nommé Social Media. Nous allons sélectionner ce dossier, puis nous allons passer aux paramètres avancés sur la gauche. Nous allons ouvrir nos paramètres avancés et cliquez sur la catégorie d'informations locales. Pour notre dossier d'images par défaut nous allons cliquer sur cette recherche de dossier et nous allons choisir le dossier images dans ce dossier et nous allons cliquer sur le bouton Enregistrer. Donc, dans notre panneau de fichiers en haut à droite, nous avons maintenant notre site de médias sociaux. Désormais, les fichiers SVG sont des fichiers graphiques vectoriels évolutifs. Alors qu'est-ce que cela signifie? Eh bien, contrairement aux fichiers JPEG et PING, qui sont des images créées à l'aide de carrés ou de pixels des informations de couleur, Les fichiers SVG utilisent des informations vectorielles, donc des points et des segments pour créer ces graphiques. La meilleure chose à propos des SVG est qu'ils sont indépendants de la résolution. Alors qu'est-ce que cela signifie? Eh bien, cela signifie que vous pouvez les faire aussi grands que vous le souhaitez ou aussi petit que vous le souhaitez et ils ne perdent jamais en qualité. Maintenant, je viens de chercher sur Google des vecteurs gratuits de médias sociaux et j'ai découvert sur le net quelques graphiques vectoriels en noir et blanc que j'ai ouvert dans Illustrator et j'ai utilisé cette fonctionnalité d'exportation d'actifs et les ai enregistrés en tant que SVG après avoir ajouté mes propres couleurs à ces graphiques. Ainsi, vous pouvez obtenir des fichiers SVG à partir d'Adobe Illustrator. De retour dans Dreamweaver, nous allons ouvrir le fichier de code simple. Nous allons passer à la vue en direct et quand nous allons à la vue en direct, c'est un fichier sur lequel nous avons travaillé précédemment, et nous allons descendre jusqu'à ce qu'il soit dit équipement, et nous allons passer en mode Design. Donc, en haut, nous allons passer de Live à Design, nous allons faire défiler vers le bas et après l'équipement, nous allons appuyer sur la touche Entrée et nous allons taper Suivez-nous. Et avec notre curseur dans ce Follow Us, nous allons descendre dans notre panneau de propriétés et nous allons également changer cette propriété en titre, pour correspondre aux autres sous-titres de notre page puis nous allons appuyer sur la touche Entrée. Si nous passons à notre panneau de fichiers et on clique sur la flèche juste à gauche des images, nous pouvons voir que dans notre dossier images nous avons un dossier SVG et il y a nos trois icônes de médias sociaux là-dedans. Vous remarquerez qu'il y a une icône de code à côté de chacun de ces graphiques, pas l'icône graphique que nous avons l'habitude de voir. Nous ne pouvons donc pas cliquer et faire glisser sur l'une de ces icônes parce que quand nous le faisons, cela devient un lien au code réel qui est ce fichier SVG, donc je vais juste supprimer ça. Il faut aller dans le menu Insertion pour insérer une image. Et assurez-vous que vous êtes dans le dossier images et nous allons entrer dans notre SVG et nous allons sélectionner notre SVG Facebook, le SVG FB et nous allons cliquer sur OK. Maintenant, lorsque nous le faisons et que nous sommes en mode Création, nous obtenons cette étrange petite icône après notre Follow Us, mais si nous allons en mode Conception et changeons cela en mode En direct, et nous faisons défiler vers le bas, nous pouvons voir qu'il est assez grand. Alors on va cliquer dessus et vers le bas dans notre panneau de propriétés, nous avons les mêmes propriétés que nous pour chacune de nos images. Donc, nous allons juste mettre 50 pixels et cliquez sur la touche Entrée et cela le rend beau et petit pour ce dont nous avons besoin. Maintenant, avec des images basées sur des pixels, vous devez vraiment vous soucier de la taille. Vous voulez apporter ces images au plus près de la taille que vous allez les utiliser que possible parce que le navigateur Web doit traiter la plus grande image même si vous le réduisez dans Dreamweaver. Donc on va monter dans le menu Live et remettez-le en Design et on va mettre notre curseur juste après cette image et nous allons cliquer sur la barre d'espace. Nous allons aller dans le menu d'insertion pour imager et nous allons aller dans notre dossier SVG et nous allons choisir twitter.svg, nous allons cliquer sur OK. Maintenant, notre image apparaît comme ce petit espace réservé et avant même de passer à la vue en direct, on va juste mettre une largeur et une hauteur de 50 pixels et quand nous passons à la vue en direct et nous faisons défiler vers le bas, voici nos deux images pour nos boutons de médias sociaux. Nous allons accéder à notre panneau de fichiers et nous allons double-cliquer sur notre index et nous pouvons voir en bas de notre document, nous n'avons pas d'icônes de médias sociaux, nous allons donc travailler avec nos icônes de médias sociaux. Maintenant, si nous cliquons sur cette barre vert foncé, on voit qu'il y a... Lorsque nous sommes en mode En direct, il y a un paragraphe, une classe d'icônes sociales lui est appliquée. Nous allons donc passer à notre vue Design et avec notre curseur juste là, on va aller dans notre menu Insertion pour insérer une image, nous allons saisir ce SVG Facebook et l'ouvrir. Maintenant encore, nous obtenons le même regard ici. Si nous allons à la vue en direct et faisons défiler vers le bas, notre image est grande. Elle n'est pas aussi grande que l'image du dernier document, mais il est encore assez grand pour tenir dans cette zone. Ainsi, le conteneur de cette image définit partiellement quelle est sa taille. Maintenant, nous allons aller ici pour la classe car ce document contient déjà du CSS intégré. Donc, si nous avons cliqué sur cette classe et nous choisissons thumbnail social pour la classe, nous pouvons voir comment il le centre et il s'adapte bien dans cette zone et nous pouvons le faire à partir de la vue en direct. Maintenant avec les images sur le dernier document et avec cette image ici en ce moment, tout ce qu'ils font, c'est nous montrer cette icône Facebook, mais tu peux faire n'importe quelle image dans un lien. Dans notre module cinq créer des liens, nous avons créé des liens hors du texte, mais ici nous allons parler de la façon de créer des liens à partir d'un graphique. Donc, si nous avons sélectionné cette image et nous pouvons dire ici dans notre zone de sélection, nous avons cette image sélectionnée. Juste en dessous de la source de notre image dans notre zone de liens, nous pouvons simplement taper... On va faire un lien absolu http://www.facebook.com et nous n'avons pas de page réelle sur Facebook que nous allons, donc nous allons juste le mettre à Facebook lui-même et nous cliquons sur la touche Entrée et qui appliquera ce lien à notre image. Alors dans cette leçon, tu as appris à ajouter Fichiers SVG sous forme d'icônes de médias sociaux, comment les redimensionner et comment créer des liens à partir d'eux.
