Outils graphiques / Web création Outils graphiques / Web création
Référence formation : 2-H5-PERF - Durée : 3 jours

 
  • Objectifs
  • Pré-requis
  • Pédagogie
Comprendre le positionnement des éléments dans une page Modifier dynamiquement l'apparence d'une page par rapport au périphérique de consultation Utiliser les transformations et animations
Des connaissances en HTML et CSS sont nécessaires

Organisation

Les sessions de formation ont lieu de 9h00 à 12h30 et de 13h30 à 17h00

Profil formateur

  • Nos formateurs sont des experts dans leurs domaines d'intervention
  • Leur expérience de terrain et leurs qualités pédagogiques constituent un gage de qualité

Moyens pédagogiques

  • Réflexion de groupe et apports théoriques du formateur.
  • Travail d'échange avec les apprenants sous forme de réunion - discussion.
  • Utilisation de cas concrets issus de l'expérience professionnelle.
  • Validation des acquis par des questionnaires, des tests d'évaluation, des mises en situation et des jeux pédagogiques.
  • Alternance entre apports théoriques et exercices pratiques (en moyenne sur 30 à 50% du temps)

Modalités d'évaluation

  • Positionnement préalable oral ou écrit.
  • Feuille de présence signée en demi-journée.
  • Evaluation des acquis tout au long de la formation.
  • Questionnaire de satisfaction
  • Attestation de stage à chaque apprenant
  • Evaluation formative tout au long de la formation.
  • Evaluation sommative faite par le formateur .

Public concerné

Salariés - Demandeur d'emploi - Reconversion professionnelle

Adaptation pédagogique et matérielle

Si vous avez besoin d'adaptation matérielle ou pédagogique, merci de prendre contact avec notre référent Handicap par téléphone au 02 35 12 25 55 ou par email à handicap@xxlformation.com

Moyens techniques en formation présentielle

Accueil des apprenants dans une salle dédiée à la formation et équipée avec :

  • Ordinateurs
  • Vidéo projecteur ou Écran TV interactif
  • Tableau blanc ou Paper-Board

Moyens techniques en formation distancielle

A l'aide d'un logiciel comme ® Microsoft Teams ou Zoom, un micro et une caméra pour l'apprenant.

  • Suivez une formation en temps réel et entièrement à distance. Lors de la session en ligne, les apprenants interagissent et communiquent entre eux et avec le formateur.
  • Les formations en distanciel sont organisées en Inter-Entreprise comme en Intra-Entreprise.
  • L'accès à l'environnement d'apprentissage (support de cours, ressources formateur, fichiers d'exercices ...) ainsi qu'aux preuves de suivi et d'assiduité (émargement, évaluation) est assuré.
  • Les participants recevront une convocation avec le lien de connexion à la session de formation.
  • Pour toute question avant et pendant le parcours, une assistance technique et pédagogique est à disposition par téléphone au 02 35 12 25 55 ou par email à commercial@xxlformation.com

Contenu pédagogique

HTML - Rappels sur la structuration d'une page

  • Balises span et div
  • Les sections logiques d'une page
  • Les balises block et inline
  • Propriété CSS display
  • Définir la largeur, la hauteur et l'alignement
  • Définir les bordures
  • Définir les marges externes et internes

CSS - Les sélecteurs et les pseudos-classes évoluées

  • Rappels sur les sélecteurs courants
  • Rappels sur les pseudos-classes courantes
  • Les pseudos-classes évoluées
  • CSS pour réaliser un compteur
  • CSS pour créer du contenu

CSS - Les média-queries

  • Les propriétés d'affichage
  • Propriété CSS visibylity
  • La fonction calc() et la propriété min – max

Mise en pratique - Ecriture d'une page qui s'adapte automatiquement

Positionnement des éléments

  • Positionnement des éléments
    • Les positions absolues, relatives et fixes
    • Les éléments flottants
    • Utilisation de top, bottom, left, right

    Gérer les scrollers dans ma structure

    • Propriété CSS overflow
    • Mettre en place un effet parallaxe dans une page

    Mise en pratique - Utilisation d'un effet parallaxe

    CSS - Transformation

  • CSS - Transformation
    • Gérer la position x et y
    • Modifier la taille proportionnellement
    • Rotation
    • Déformation

    Mise en pratique - Mise en page polaroid

    CSS - Transition

  • CSS - Transition
    • Les propriétés visées par la transition
    • La durée et le délai de déclenchement

    CSS - Animation

    • Définir une animation
    • Appliquer une animation

    Mise en pratique - Faire un slider

    Mise en pratique - apparition d'étiquette au survol d'un élément

  • Mise en pratique - apparition d'étiquette au survol d'un élément