Créer un site web avec Dreamweaver CC

Intégrer les réseaux sociaux

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Exploitez l'ensemble des techniques vues jusque là. Il s'agit de l'intégration de typographies, de l'arrière-plan et du positionnement. Pour l'usage du bloc inline, apprenez une petite astuce pour corriger le problème des trois pixels.
07:27

Transcription

Côté réseaux sociaux, on a quelques complexités qu'on a déjà vues, image d'arrière plan ici comme la cassette, des découpes ici avec deux types de titrage comme on a pu faire dans cette partie là. Ici, on a des phrases à deux niveaux d'écriture, mais on a une petite forme de dessin à l'intérieur. Et ici, aussi à l'extérieur. Copions, collons le contenu directement dans notre partie, et pour le formater ici réservez vos place en ligne Early Bird, on pourra faire ici directement un h1 avec un titre, qui va nous permettre de pouvoir directement avoir un bloc d'éléments. Et puis pour la partie Twitter, on va faire des listes, avec dans cette liste un élément de li, pour le premier élément et on y mettra une classe Twitter et puis pareil pour Facebook, avec une classe Facebook et Linkedin, une classe Linkedin. Tous nos éléments sont prêts. Ici, je vois que j'ai un petit texte qui n'a rien à faire ici. On va pouvoir maintenant venir coder un span à ce niveau-là pour pouvoir le distinguer directement. Donc, ctrl + T, cmd + T sur Macintosh, on place notre span. On va pouvoir avoir un autre span dans la partie basse de ce texte ici. Barré. Et puis, au niveau, si on regarde bien ici des idées partagées, on pourra mettre l'élément ici. Et puis à cet endroit-là, on va pouvoir placer un span pur et dur. Et on ferme ce span ici, donc un simple span. Par contre, on a pu placer par exemple une classe ampoule pour pouvoir la distinguer. Si, on regarde bien, on a tout ce qui nous faut ici maintenant. On n'a plus qu'à passer aux feuilles de style. Côté, h1, donc le petit texte en bleu, on a simplement besoin de placer une largeur et une hauteur proportionnelles, bien entendu, du % pour la largeur pour respecter la fenêtre, de vw pour la hauteur, afin de rester comme même sur quelque chose de cohérent padding-left, paddingtop pour pouvoir décaler nos textes couleur d'arrière-plan et taille de typo. Pour la partie span ici, on a simplement une typo qui change display: block. Et justement, en parlant de typo, on a besoin de deux typos qu'on va importer comme on l'a fait tout à l'heure, c'est à dire depuis les outils Gestion de police ici, on va devoir intégrer deux polices web locales cette fois-ci, de la Berlin Sans, donc de li, de la Berlin sans. Et de la... alors on va l'ajouter de la ITCBLKAD, blackadder voilà ici. Ouvrir, je détiens, Ajouter. Donc, on va pouvoir maintenant faire appel à ces deux typos. Alors, pour le h1 ici, on va pouvoir rajouter celle-ci, et pour la partie du span, on va pouvoir rajouter la ITCBLKAD alors on va le faire directement ici, font-family, voilà ici. Et on va pouvoir venir la chercher dans la partie ITCBLKAD, voilà on va utiliser le nom qui a été employé par l'importation. Et là, c'est parfait, on a nos deux typos qui sont utilisés pour l'instant Dernier point maintenant, la partie de l'image ici. Donc, on va pouvoir revenir faire un background image cette fois-ci, avec un url. Le chemin d'accès va être sur l'élément importé. Donc, on a importé la flèche ici, social-fleche, voilà. On va pouvoir la mettre. On va demander d'avoir un background repeat qui soit inexistant. On va lui demander d'être contenu, et va la passer à 90% à gauche directement, avec un 0 par rapport au temps. Il nous reste maintenant à faire flotter cet élément pour être sûr que tout le reste du texte puisse passer sur la droite Donc, on va le faire flotter à gauche tout simplement. Et une fois que ça c'est fait, on va pouvoir faire exactement la même chose pour tous les autres éléments. Alors, pour ça, on va commencer par formater le paragraphe, donc avec une largeur de 25%, [puisqu'il prendra la goulotte] donc si vous regardez bien, là il faisait pas 75%. Le pourcentage qui manque avec ces chiffres après la virgule, qui sont très importants va pouvoir correspondre à cet espace-là, qui correspondrait à 10px si on prend notre interface de base. Donc, ici on fait le flotter à droite cette fois-ci, on a la marge en bas, qui correspond exactement à cette différence entre 75 et 25, pareillement pour pouvoir avoir une marge basse ici, la couleur d'arrière plan. Une typo qui a été importer, la 2dumb, et la hauteur de ligne qui va permettre cette écriture et un text: center. Maintenant, on va pouvoir classer l'ampoule. Alors là, l'ampoule on va utiliser exactement la classe ampoule mais surtout, la même manière de fonctionner. C'est à dire, avec une image d'ampoule qui n'a pas de répétition, qui est centrée et donc cette image qui va être importée va pouvoir se placer ici. Et puis on a un petit élément, c'est qu'il y a un deuxième span qui suit cet élément-là ici, et bas pour ce deuxième span, ce qu'on va faire c'est on va lui utiliser un span + span qui dira le premier span qui était celui de l'ampoule va correspondre à quelque chose, qui est ça. Et le deuxième span qui suit va correspondre à quelque chose de différent qui va en fait avoir un padding différent, et une hauteur de ligne différente, et une écriture différente. Pour le social ul, maintenant, c'est à dire la partie de la liste que l'on va utiliser, en fait, ce sont des petits blocs qui vont utiliser une largeur un peu particulière, puisqu'ils vont correspondre à 7,74% c'est à dire ce 25% moins les 2 * 0,84, là % de largeur ici, de façon à pouvoir rester cohérent. Donc, on va avoir la même marge qui sera utilisée. On va avoir une hauteur qui sera la hauteur restante, c'escette hauteur moins de 10 px correspondant, c'est à dire 0.8000 et quelques, la hauteur. Et là, par contre, un petit détail, c'est qu'on fait du inline-block. Alors, pour ceux qui font du css, déjà vous vous êtes aperçu que le inline-block générait 3 pixels de petite problématique. Pour ceux qui n'ont pas l'habitude, je vous invite à vous rapprocher des fondamentaux de css auprès de notre catalogue, pour mieux prendre en compte le positionnement. La seule façon qu'on va faire, pour nous maintenant ici. Il existe d'autres au niveau des alternatives. Mais nous ce qu'on va faire, c'est qu'on va supprimer tous les espaces ici. Alors, regardez ce qui se passe ici si je regarde mon bloc, je vais faire F5 pour pouvoir actualiser vous voyez les blocs ne tiennent pas en compte, parce que ces trois pixel qui sont générés à chaque fois. La seule de corriger ici, c'est de dire : je vais supprimer tout les espaces. Parce qu'en fait, ce sont ces espaces-là, qui sont considérés comme des caractères presque invisibles, on va dire, et qui tiennent de la place. Vous avez vu dès que je les supprime tout rentre dans l'ordre. Alors, faites attention si vous devez faire un Edition code, Appliquer le format source, vous allez perdre cette indentation, donc vous allez perdre ce placement ici. Petit détail maintenant, pour chacune de mes classes, si je regarde bien au niveau du social, on a fait un text-indent de 9999, qui dégage l'intégralité de ces éléments. On a préparé un background: repeat. Mais, on n'a pas d'image, les images sont placées dans les classes à part. Donc, le fameux social Twitter, social Facebook, social Linkedin qui va placer toutes nos icônes qui va les positionner à l'intérieur. On a quasiment terminé, mais, on pourrait rajouter, si vous regardez bien ici vous avez la couleur gris d'arrière plan qu'il ne devrait pas y avoir, c'est parce que dans les structures, on avais mis des couleurs d'arrière-plan. Alors, on pourrait venir les supprimer. Le plus simple c'est de rajouter la classe social, avec une couleur d'arrière plan ici. Donc, si je viens dans la classe social tout en haut, voilà, je mets un background transparent, vous voyez que maintenant, on va se retrouver sur notre font de page sans cette couleur grise qui était l'apanage de la structure.css

Créer un site web avec Dreamweaver CC

Réalisez votre premier site web avec Dreamweaver. Abordez les principales étapes de conception, telles que la création d’une page web, l’ajout de contenu multimédia, etc.

3h04 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :25 janv. 2017
Durée :3h04 (37 vidéos)

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 !