Implémentation et Personnalisation avec CSS
Objectifs
L'objectif de cette vidéo est d'apprendre à styliser un menu de navigation en HTML et CSS, à partir d'un design Photoshop. Vous apprendrez à :
- Transformer une liste HTML en un menu de navigation stylisé
- Supprimer les puces et ajuster les marges avec CSS
- Intégrer des styles Photoshop dans un projet web
- Utiliser
box-shadowpour ajouter et ajuster des ombres portées
Résumé
Découvrez comment transformer un menu de navigation HTML basique en un élément visuellement attrayant grâce à l'utilisation de CSS et d'un design Photoshop.
Description
Dans cette leçon, nous vous montrons comment prendre un menu de navigation simple en HTML et le styliser afin d'obtenir une apparence professionnelle. Nous commencerons par créer une liste non ordonnée pour notre menu, puis nous utiliserons des styles CSS pour supprimer les puces et ajuster les marges afin d'obtenir une présentation épurée. Les éléments de notre liste seront transformés en boutons visuellement attrayants en utilisant des styles copiés depuis une maquette Photoshop. Nous expliquerons également l'utilisation de la propriété box-shadow pour ajouter une ombre portée, et comment ajuster son opacité avec la notation RGBA.
Tout au long de cette leçon, vous apprendrez les étapes fondamentales pour intégrer un design graphique dans un projet web, en manipulant des propriétés CSS telles que border, background-color et box-shadow. L'objectif est de vous donner les compétences nécessaires pour transformer n'importe quel élément HTML en un composant stylisé qui s'intègre parfaitement dans le design global de votre site.
Questions - réponses
list-style-type: none;.
box-shadow, on utilise les valeurs RGBA en ajoutant un quatrième paramètre représentant l'alpha (opacité), par exemple rgba(0, 0, 0, 0.5) pour 50 % d'opacité.
border en CSS est utilisée pour définir la bordure autour d'un élément, incluant son épaisseur, son style (par exemple solide, pointillé) et sa couleur.
Programme détaillé
Module 1 - Introduction de la formation à Photoshop CC pour le Web
Module 2 - Les raccourcis utiles de Photoshop CC
Module 3 - Création de formes vectorielles, édition de formes
Module 4 - Les réglages élémentaires de Photoshop
Module 5 - Exporter individuellement les images bitmaps pour le Web
Module 6 - Exporter un SVG depuis Photoshop CC
Module 7 - Créer plusieurs versions dune composition Photoshop CC
Module 8 - Réaliser un Gif animé
Module 9 - Réaliser un rollOver CSS
Module 10 - Réaliser un Sprite Sheet (animation pelliculée)
Module 11 - Exporter une page XHTML statique à laide de loutil Tranches
Module 12 - Réaliser une composition HTML5 sémantique à partir de Photoshop
Module 13 - Gérer les styles CSS de formes primitives avec Photoshop
Module 14 - Gérer les styles CSS de textes éditables avec Photoshop
Module 15 - Exporter les calques par lot à laide de lextension Photoshop Generator
Module 16 - Générer automatiquement les icones dune application mobile
Module 17 - Exporter une composition Photoshop vers les autres logiciels Adobe
Module 18 - Réaliser un Gif vidéo
Module 19 - Réaliser un montage vidéo pour le Web avec Photoshop
Module 20 - Conclusion
