> formation Compétences métiers > formation Communication d'entreprise > formation Communication écrite, rédaction Web et Print > formation Responsive Web Design, les techniques modernes de mise en page

Avis loadedERROR Avis : La référence d'objet n'est pas définie à une instance d'un objet.
Toutes nos formations Communication écrite, rédaction Web et Print

Formation Responsive Web Design, les techniques modernes de mise en page
tutorat en option
E-learning

Stage pratique
100% à distance
Durée : 2 heures 14 mn
Réf : 4DH
Prix  2021 : 40 € H.T.
  • Programme
  • Participants / Prérequis
Programme

Ces tutoriels de formation 100% à distance ont pour objectifs de vous apprendre des techniques modernes de mise en page afin de créer des sites web dont l'affichage s'adapte automatiquement aux écrans sur lesquels ils sont diffusés. Ils s’adressent à un public de créateurs de site web, designers, chefs de projets, webmasters ou toute personne disposant des connaissances de base en langages HTML et CSS qui souhaite s'initier au responsive web design . La pédagogie s'appuie sur un autoapprentissage séquencé par actions de l’utilisateur sur l’environnement à maîtriser.

Objectifs pédagogiques

À l’issue de la formation, le participant sera en mesure de :
  • Découvrir le responsive web design
  • Mettre en page avec les grilles responsives
  • Effectuer une mise en page fluide
  • Intégrer des images responsives
  • Utiliser les frameworks CSS

Démonstration

Reproduire avec son logiciel ce qui est montré dans chaque séquence. Les documents utilisés dans cette formation sont téléchargeables pour s'exercer.

Méthodes pédagogiques

Pédagogie 100% à distance s'appuyant sur des tutoriels vidéos. Un auto-apprentissage séquencé par actions utilisateur sur le logiciel à maîtriser.
PROGRAMME DE FORMATION

Découvrir le responsive web design

  • Le web design aujourd'hui.
  • L'utilisation et la syntaxe des media queries.
  • Le placement des requêtes de médias.
  • La taille des écrans.
  • L'attribut viewport.

Démonstration
Reproduire avec son logiciel ce qui est montré dans chaque séquence et faire les TP. Un exemple simple de site responsive.

Mettre en page avec les grilles responsives

  • Les grilles responsives.
  • La grille Simple Grid.
  • La mise en page avec Simple Grid.
  • La grille Columnal.
  • La mise en page avec Columnal.
  • Les images responsives avec Columnal.
  • La grille Responsive Grid System.
  • La mise en page avec Responsive Grid System.

Démonstration
Reproduire avec son logiciel ce qui est montré dans chaque séquence et faire les TP.

Effectuer une mise en page fluide

  • L'affichage de la mise en page fluide.
  • La mise en page et les images fluides.
  • La mise en page fixe.
  • Passer à la mise en page fluide.

Démonstration
Reproduire avec son logiciel ce qui est montré dans chaque séquence et faire les TP.

Créer des images responsives

  • Le script Respond.js.
  • Le script picturefil.js.
  • Le script picturefill.js pour les images HD.
  • Les propositions d'avenir.

Démonstration
Reproduire avec son logiciel ce qui est montré dans chaque séquence et faire les TP.

Utiliser les frameworks CSS

  • Les frameworks.
  • Le framework Kube.
  • La grille de mise en page avec Kube.
  • Le formulaire avec Kube.
  • Le framework KNACSS.
  • La grille de mise en page avec KNACSS.
  • Le framework Pure.

Démonstration
Reproduire avec son logiciel ce qui est montré dans chaque séquence et faire les TP. Une mise en page blog avec Pure.

Créer une page d'accueil responsive

  • Le framework UIkit.
  • La maquette responsive.
  • La structure de la mise en page.
  • La structure de l'en-tête.
  • La structure de la zone des trois activités.
  • La structure de la zone de l'image centrale.
  • La structure de la zone du bureau.
  • La structure de la zone des sorties.

Démonstration
Reproduire avec son logiciel ce qui est montré dans chaque séquence et faire les TP.

Participants / Prérequis

» Participants

Créateurs de site web, designers, chefs de projets, webmasters ou toute personne souhaitant s'initier au responsive web design.

» Prérequis

Connaissances de base en langages HTML et CSS.
Intra / sur-mesure

Demande de devis intra-entreprise
(réponse sous 48h)

Vos coordonnées

En cochant cette case, j’atteste avoir lu et accepté les conditions liées à l’usage de mes données dans le cadre de la réglementation sur la protection des données à caractère personnel (RGPD).
Vous pouvez à tout moment modifier l’usage de vos données et exercer vos droits en envoyant un email à l’adresse rgpd@orsys.fr
En cochant cette case, j’accepte de recevoir les communications à vocation commerciale et promotionnelle de la part d’ORSYS Formation*
Vous pouvez à tout moment vous désinscrire en utilisant le lien de désabonnement inclus dans nos communications.
* Les participants inscrits à nos sessions de formation sont également susceptibles de recevoir nos communications avec la possibilité de se désabonner à tout moment.