Adobe Dreamweaver est une application de web design prenant en charge les formats HTML, CSS, JavaScript, etc.
débuter avec un nouveau fichier
En local, il est nécessaire de créer le dossier racine de votre projet Dreamweaver. Il devra contenir les dossiers : css, img, js (pour les fichiers dynamiques) et un fichier index.html
1. Sur Dreamweaver, créez un nouveau document html, donnez un titre à cette page (animation en css) puis enregistrez-le dans le dossier racine sous le nom index.html
2. Créez un autre document css et enregistrez ce fichier dans le dossier « css » du dossier racine.
3. Pour synchroniser l’ensemble, il est nécessaire de définir le site et de relier les dossiers attachés à la page index.html
Menu Site > Gérer les sites…
Créez un nouveau site, donnez un nom puis ciblez le dossier local du site. Dans les « Paramètres avancés » > « Infos locales« , définissez le dossier des images par défaut. Cliquez sur Terminé.
Vous devriez voir l’arborescence du site dans le panneau Fichiers.
reset html
Il convient de positionner un « reset » sur le CSS afin d’éviter les bordures et d’utiliser l’ensemble de la fenêtre écran.
*{margin: 0; padding: 0; box-sizing: border-box;}
Pour que le fond de la fenêtre suive le redimensionnement, il faut agir sur le body.
body{width: 100%; min-height: 100vh; display: flex;}
Width est à 100% tandis que la propriété min-height utilise une valeur vh.
L’unité de longueur CSS vh est relative à la hauteur du bloc conteneur initial.
Paramètres de largeur et de hauteur de la page HTML | CSS Taille plein écran (17 min en anglais)
importer une image .gif
Un gif se comporte comme image mais a l’avantage de créer un animation sans utiliser du code. Importez votre gif dans une balise <img>.
importer une vidéo .mp4
Il est possible d’intégrer une vidéo de deux manières : en copiant le code <iframe> disponible dans les options de partage ou en utilisant la balise html5 video de Dreamweaver.
Pour ce deuxième cas, les vidéos devront être intégrées dans un dossier « video » du dossier racine et être disponibles en trois formats : .mp4, .ogv et .webm.
Vous devrez utiliser un convertisseur de vidéo en ligne pour obtenir ces différents formats (par exemple : convertio.co).
Ouvrez le panneau des propriétés pour définir les options de la vidéo html5 intégrée. Pour être correctement positionnée dans la fenêtre, votre vidéo doit utiliser une class. Il convient d’ajouter une image de couverture nommée « Poster » aux dimensions de la vidéo. Dans le champ « Preload », choisissez l’option « métadonnées » pour faciliter l’expérience utilisateur.
Tutoriel Adobe Dreamweaver — Ajout d’une vidéo HTML5 dans Dreamweaver (6 min en anglais)
EXO 1 – propriété transform
Placez un carré bleu pour tester la propriété « transform ».
La propriété CSS transform permet de spécifier le type de transformation 2D ou 3D à appliquer sur un élément HTML. Le type est ensuite spécifié par les valeurs translate (déplacement d’un élément), scale (l’échelle exprimée en 1.5), rotate (rotation exprimée en degré : deg), skew (angle des côtés exprimés en degré : deg), …
translate
La valeur translate()permet de déplacer un élément sur le plan représenté par le document. Cette transformation est définie à l’aide d’un vecteur dont les coordonnées indiquent la quantité de déplacement sur chaque ax (horizontal et vertical).
scale
La valeur scale() permet de modifier la taille d’un élément avec un facteur d’échelle sur deux dimensions.
rotate
La valeur rotate() définit une transformation qui déplace un élément autour d’un point fixe (défini par la propriété transform-origin) sans le déformer (autrement dit, qui applique une rotation plane). C’est une rotation autour de ce point. Par défaut, cette origine correspond au centre de l’élément.
skew
La valeur skew() permet d’opérer une distorsion en étirant chaque point de l’élément d’un certain angle dans une direction du plan.
Testez les valeurs :
transform: skewY(-10deg);
Vous obtiendrez une forme oblique, utile pour des sections plus originales.
transform: skew(-5deg, 25deg);
Les angles se déforment et s’éloignent de la forme d’un carré désigné au départ.
cumuler des transformations
Attention : Les éléments dont la disposition est gérée avec des boîtes en ligne (<span>) et des colonnes en tableau (<col>, <table>) ne peuvent pas être transformés.
définir l’ordre d’affichage des éléments
La propriété z-index définit le « z-order ». Lorsque des éléments se chevauchent, le z-order détermine l’ordre des différentes couches que formeront les éléments. Le chiffre le plus grand indique une position la plus haute dans la page (comme un premier plan)
EXO 2 – animation de base n°1
Les animations se composent de la propriété « animation » et de la règle « @keyframes ». Dans la première, vous définissez l’élément et le type d’animation souhaité, et dans la seconde, vous réglez les étapes des modifications de l’élément (dans notre exemple exprimées en %).
La règle @keyframes contrôle les effets d’animation avec plus de finesse qu’en utilisant les transitions.
- animation-name cible la keyframe
- animation-duration fixe le temps de l’animation
- animation-fill-mode: both; permet de fixer le déplacement à son point d’arrivée
- et animation-delay retarde le déclenchement de l’animation
- animation-iteration-count: infinite; vous permet de créer une boucle de lecture ou vous pouvez spécifier un chiffre pour fixer le nombre de lecture
- animation-direction: normal ou reverse (sens inverse de la keyframe), ou alternate (de la droite vers la gauche puis de la gauche vers la droite et ainsi de suite)
- animation-timing-function: cubic-bezier(0.0, 0.0, 1.0, 1.0); la valeur cubic-bezier vous permet de régler la vitesse du déplacement selon vos besoins. Sinon vous pouvez utiliser des valeurs ease-in ou ease-out pour accélérer ou ralentir le mouvement au début ou à la fin de l’animation.
Un site pour régler la vitesse de l’objet et copier le code généré : cubic-bezier.com
EXO 3 – animation de base n°2
Mettre en place les éléments css pour la class .anim_base_2 (=conteneur), puis la class .boite (définit la couleur) et enfin pour les deux éléments en mouvement class .boite_1 et class .boite_2.
Décrire le déplacement de l’animation « glisse » sur l’élément .boite_2 :
animation: glisse 1s cubic-bezier(0.7, 1, 1, 0.7) infinite;
@keyframes glisse{
0% {top: 0%; left: 50%;}
33% {top: 0%; left: 0%;}
66% {top: 50%; left: 0%;}
100% {top: 50%; left: 50%;}
}
Positionnez l’animation « rotation » sur l’élément .anim_bas_2 :
animation: rotate 4s steps(4) infinite;
@keyframes rotation{
from {transform: rotate(0deg);}
to {transform: rotate(-360deg);}
}
EXO 4 – ajouter un temps de pause à l’animation grâce au hover
Sous la class .anim_base_1 ajoutez le code ci-dessous.
La pseudo-classe :hover permet de spécifier l’apparence d’un élément au moment où l’utilisateur le survole avec le pointeur, dans notre cas, un temps de pause.
.anim_base_1:hover{
animation-play-state: paused;
}
autres exos à explorer avec codepen
téléchargez le dossier d’exercice
téléchargez le dossier de l’exercice finalisé