Importer et Animer une Page HTML dans Edge

Apprenez à importer et animer une page HTML dans Edge à l'aide de propriétés CSS et de scénarios d'animation.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous vous montrerons comment importer une page HTML, réalisée sous Dreamweaver, dans Edge. La page inclut une image et diverses balises div pour structurer le texte. Vous apprendrez à ouvrir ce fichier HTML dans Edge, à ajuster la vue de la scène en dézoomant, et à sélectionner les éléments individuellement pour les animer. Nous nous concentrerons sur l'animation des propriétés comme la position et l'opacité de l'image, en utilisant des scénarios d'animation. Vous découvrirez comment enregistrer des animations et ajuster les propriétés via la fenêtre de propriété. Enfin, vous comprendrez la mécanique de création des animations et comment les appliquer efficacement pour publier votre travail.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :
- Apprendre à importer une page HTML dans Edge.
- Comprendre comment utiliser le scénario pour animer des éléments.
- Manipuler les propriétés d'animation d'objets HTML.

Prérequis pour cette leçon

Les prérequis pour suivre cette vidéo sont :
- Connaissance de base en HTML et CSS.
- Expérience préalable avec des outils de conception web comme Dreamweaver.

Métiers concernés

Cette leçon est utile pour les :
- Web Designers
- Développeurs Front-end
- Graphistes travaillant avec des animations web.

Alternatives et ressources

Les alternatives à Edge incluent :
- Adobe Animate pour des animations plus complexes.
- Google Web Designer pour la création d'annonces HTML.

Questions & Réponses

Pour ouvrir une page HTML dans Edge, utilisez la commande 'Ouvrir un fichier' ou appuyez sur Commande O, puis sélectionnez le fichier HTML.
Lorsque vous importez une image provenant de l'extérieur de Edge, l'élément n'apparaît pas immédiatement dans le scénario. Il faut l'activer manuellement.
Pour animer l'opacité d'une image, sélectionnez l'image, puis allez dans la fenêtre de propriété, cliquez sur la clé d'opacité, définissez la valeur initiale à 0%, et après avoir déplacé la tête de lecture, changez la valeur à 100%.