Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Créer un site web avec Dreamweaver CC

Travailler le slider

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Récupérez des images à partir d'une maquette Photoshop et utilisez des typographies différentes de celles des utilisateurs. Attention, vous devrez respecter les droits d'exploitation de ces fontes.
07:24

Transcription

En ce qui concerne le slider, on avait déjà plus ou moins aperçu tout à l'heure la manière de structurer dont la complexité va venir d'utiliser une typographie Berlin Sans qui n'existe pas sur le système d'exploitation. Ici on ne le voit pas dans Photoshop mais si on regarde sur la partie de Fireworks, ici au niveau du Sketch, on a une partie alors je vaix enlever la grille ça permettra de mieux voir on une partie légèrement transparente avec une bordure tout le tour ici pour mettre en forme cet élément-là, chose qui n'avait pas été utilisé et bien entendu une image à l'intérieur. Alors côté HTML, on va récupérer tout simplement la partie structurelle, qu'on avait eu tout à l'heure et on va simplement ajouter une image pour l'instant à ce niveau là. Alors pour le côté font-family, moi je vous invite à aller dans les outils et gérer les polices. Et puis ici au niveau de la gestion des polices, on a plusieurs possibilités soit on utilise le Edge web font, donc vous trouveriez bonheur si vous aviez utilisé une Berlin qui se trouve à l'intérieur de cet élément-là. Le Berlin ne sont pas à ce niveau-là donc il va falloir les récupérer. Je vous propose encore une fois de parcourir dans le doc ici, récupérer ce TTF. Alors pour vous je vous inviterai à aller la récupérer sur le web, ou placer toute autre typo qui peut être équivalente. C'est une question de distribution des fonts. Il est préférable de chacun à récupérer ses typos. À ce niveau-là il faudra que vous placiez le fait de dire que vous détenez la licence appropriée pour pouvoir l'ajouter dans la liste de police locale. Une fois que c'est terminé maintenant si vous vous placez dans la partie slider h1, on va aller placer quelque css, slider h1 oui mais en fait on va la placer au niveau du slider puisque y compris le slider h2 va l'utiliser ici on va pouvoir utiliser une font-family, et dès l'instant où on va prendre une font-family vous allez avoir apparaître dans la liste la Berlin Sans qui est apparue à ce niveau-là parce qu'elle a été installé. Alors si vous ne la prenez pas d'un point de vue code si vous la travaillez au niveau simplement du CSS Designer, si vous allez dans le sélecteur du slider et que vous venez voir la propriété ici au niveau de la typo, bien entendu elle va également apparaître dans cette liste ici puisqu'elle a été intégrée au système. Voilà donc après c'est de la css classique donc on a le h1 qui va être écrit avec une certaine dimension et de couleur orange, alors que la h2 sera écrit en blanc avec une autre dimension. Donc on va pouvoir les coder comme ça, en dur et tous les deux on va les positionner en absolute. De ce fait ils vont pouvoir sortir du flux et passer devant l'image. Le petit souci c'est que s'ils sont en sortie de flux à ce niveau-là, il va falloir les positionner par rapport à leur premier parent positionné, c'est-à-dire le slider qui va devoir lui être en position relative sinon il ne deviendrait pas parent positionné et donc de ce fait les éléments h1 et h2 iraient se positionner à l'extérieur par rapport au body. Pour le slider p, on va pouvoir ajouter pareillement son positionnement donc ici on va pouvoir le positionner de manière absolu et donc il se positionnera par rapport au slider. Je vais faire un peu d'espace ici voilà. On va lui donner également une largeur et une hauteur. Depuis le début j'utilise le « vw » comme unité de mesure. Si vous ne connaissez pas l'unité de mesure « vw » en fait il correspond en gros « 100vw » correspond à 100% de la largeur de la fenêtre. Donc plus la fenêtre sera grande, plus la typo sera grande mais l'intérêt qu'il y a d'utiliser du « vw » c'est que ça marche aussi pour la hauteur alors que 100% en hauteur ferait 100% de la fenêtre, alors que là on reste toujours sur 100% de la largeur de l'élément, donc il suffit de mesurer faire une petite règle de trois pour convertir en fonction de notre prototype. Là on va pouvoir donner une couleur d'arrière-plan et une couleur de bordure en pensant à ajouter de la transparence au niveau du background ici. Et puis il suffit de mettre un border-radius de 50% pour s'assurer de faire un rond tout simplement. Donc ensuite on va placer notre font-size, notre couleur d'élément avec une couleur blanche d'écriture, avec un text-align qui sera centre une font italic qui sera de mise pour respecter notre charte graphique. On va pouvoir tout enregistrer pour l'instant on ne va rien voir puisqu'il n'y a pas de hauteur dans la mesure où notre image n'existe pas. On a nos éléments placés, mais on n'a pas de hauteur qui vont être donnée par notre propre image. Donc il va falloir venir placer notre image maintenant pour pouvoir égrener tout cela et le dispatcher correctement. Cette image justement se trouve dans Photoshop on va pouvoir venir dans la fenêtre Extract ici, et puis il va falloir transporter sur le serveur la possibilité de télécharger un PSD. On va cliquer sur Télécharger un PSD, donc le PSD se trouve ici maintenant à bord. On a la possibilité de voir soit les styles, soit les calques. Moi ce qui va m'importer c'est le calque. Et au niveau du slider ici, on peut double cliquer sur le dossier pour pouvoir l'ouvrir ici et on va se positionner sur l'image qui nous intéresse c'est-à-dire celle-ci. Et là on va pouvoir comme ça en cliquant là-dessus la télécharger et surtout lui donner le format d'image qui nous intéresse et de bien pointer le dossier de déstination. Ici notre dossier de destination c'est bien image. On selectionne ce dossier. Le nom de l'image on va lui donner le nom de l'étape avec le petit logo font-01 puisqu'on aura deux images pour l'animation, on va rester en PNG 32 pour l'exportation et on va faire Enregistrer. L'image va s'extraire, on va se ramener sur notre dossier pour pouvoir être utilisé. Il ne nous reste plus que de retourner dans le code source maintenant puis fermer le panneau d'extraction et lier cette image directement ici depuis Parcourir. On va pouvoir venir d'un site image et venir récupérer slider font ici. Donc l'image est amenée, on va au passage « photo de scène ». Voilà on va donner un texte alternatif directement à cette image et on va pouvoir venir dans la feuille de style css ici rajouter une autre image, un display:block pour être sûr que l'image ne soit pas plus un élément de type inline et une largeur de 100% pour le caler. Il nous faut rajouter maintenant un autre slider P padding-top parce qu'on s'aperçoit qu'il est plus centré à ce niveau là. Alors on va aller retourner dans le P ici et on va placer un padding-top pour pouvoir le positionner. On va caler maintenant un dernier élément qui va être au niveau du code source ici si on regarde bien. On a cette partie du texte « avec FRJ rocks » à placer de manière différente. On va placer simplement grâce à Ctrl+T ou Commande+T sur Macintosh, en ayant sélectionné l'élément un span autour de cet élément-là. Et on peut retourner dans notre feuille de style juste après le slider p ici venir ajouter un slider p span, display:block pour le mettre format de type block. On change sa taille et son font-size et puis on le décale un peu du texte, voilà le tour est joué à ce niveau-là. Côté des styles css, si je regarde bien ici j'ai un import qui a été fait. Et si je viens du côté du fichier dans le webfonts a été importé la typographie dont j'avais besoin avec la feuille du style qui permet de faire le fameux @font-face, l'importation de cette feuille de style qui est utilisée dans cette famille. Et vous voyez que là tout est classé d'un slider. Maintenant si je reviens sur structure, j'ai la structure sur header, j'ai le header, slider j'ai la partie slider. Voilà on peut continuer et passer à l'étape suivante.

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
Date de parution :25 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 !