Webflow

Webflow

L’internet et, plus particulièrement le web, sont devenus indispensables.  Rares sont ceux qui pourraient s’en priver.

Il y a plusieurs outils qui nous permettent de monter des sites web.  WordPress, Joomla et Droopal ne sont que quelques uns parmis tant d’autres.  

Le principal avantage des systèmes de gestion de contenu (CMS pour Content Management System, en anglais) est qu’il n’est pas nécessaire de savoir coder pour construire un site.

Webflow est un CMS puissant, qui permettra aux utilisateurs de monter de grands sites avec précision.

Ouvre le site web suivant.  Il te servira

de modèle à suivre pour monter le tiens : 

Site web à construire

Les vidéos d’instruction

La liste complète des leçons offertes par Webflow se trouve à la Webflow University.  Si tu as complété une leçon avant les autres, consulte ces leçons et améliore ton site web.  

Les bases de Webflow

1 Introduction to the Designer

2 The box model

3 Elementary Hierarchy

4 The Navigator Panel

Le “Element panel”

1 The Element Panel

2 Section

3 Container

4 Columns

5 Div blocs

Leçon 1

Techniques de design de base

Avant de commencer à monter le site web, consulte le site web ci-dessous et prend en note les conseils d’un monteur de site web.

Si un site web a l’air amateur, les gens ne s’y attarderont pas et on risque qu’ils n’y reviennent jamais.  La vidéo suivante (environ 10 minutes) est pour monter un site web sur WordPress, un autre système, mais Hogan Chua explique très clairement les techniques de base du design en matière de site web.

Commence à lire la vidéo à 33m29s (11 minutes).

Les sites web les plus moches

Visite le blog suivant et choisi un site web qui n’est pas attrayant. 

Dans le Google Classroom de ta classe de BTT, ouvre la leçon “Les sites web les plus moches.  Donne au moins 5 raisons pourquoi l’auteur du blog a qualifié le site de moche.

Le lien est sur l'image

Leçon 2

L’inscription à Webflow et le dossier d’images

 

  • Une fois l’inscription terminée, appuie sur le bouton “Publish”. 
  • Visite le site web (il n’y aura qu’une page blanche à ce moment) et copie le URL de ton site web.
  • Envoie le URL de ton site web à ton professeur par l’entremise de Google Classroom.

Télécharge le dossier d’images

  • Ce dossier est essentiel pour compléter le site web.
  • Une fois téléchargé, clique sur le dossier pour le décompresser.
  • Copie le dossier “_images” sur ton disque “H”.  NE copie PAS le dossier nommé “MacOS”.
  • Si le nom de tes dossiers et image commence par un point (exemple : .-image.jpg), tu as fais une erreur.  Demande l’aide de ton professeur. 

 

Leçon 3

Plan du site web

• Activité 3 : Plan du site web

Webflow

Leçon 4

La barre de navigation

Insérer une barre de navigation est très important.  Un visiteur veut pouvoir trouver et se déplacer rapidement sur un site web.  Un visiteur ne reste souvent que quelques secondes sur un site.  S’il est lent, laid ou s’il est difficile de trouver ce qu’il cherche, le visiteur ira ailleurs.  Ce n’est pas génial si tu cherches à faire de l’argent avec ton site.

Suis les directives dans la leçon ci-dessous et consulte les vidéos pour en savoir plus.

• Activité 4 : Directives pour créer la barre de navigation

Webflow

.

Leçon 5

L’image ou la vidéo de fond d’écran

La grande image qui occupe souvent tout l’espace de l’écran est appelé une image “Hero”.  Il est préférable de placer une image qu’une vidéo en raison du poids de la vidéo.  Les gens qui consultent leur téléphone avec un forfait de données apprécient moins les sites web qui sont “lourds” (beaucoup de photos et de vidéos qui consomment leur forfait).  

Néanmoins, voici comment insérer une vidéo en fond d’écran.

Activité 5 : Insérer une vidéo ou une image en fond d’écran

Webflow

Leçon 6

La citation

Activité 6 : Suis les directives suivantes pour insérer la citation. Lis attentivement et expérimente !

Webflow

Leçon 7

La section des forfaits

Activité 7 : Suis les directives suivantes pour insérer la section des forfaits.

 

Webflow

Leçon 8

Le slider

La leçon a été modifiée le lundi 4 février 2019.  Rafraîchi la page de ton navigateur pour t’assurer d’avoir la dernière leçon si tu l’avais consultée avant cette date.

Activité 8 : Suis les directives suivantes pour insérer le formulaire.

Les images

Le site web que tu construis est accessible au monde entier.  Il est donc impératif que tu respectes les droits d’auteur.  Bien entendu, tu as le droit d’utiliser tes propres photos.  Il n’est pas toujours pratique d’avoir une photo du Machu Picchu si tu en as besoin immédiatement.  Tu peux faire une recherche avancée sur Internet pour dénicher la photo parfaite qui est libre de droit en limitant ta recherche pour les images sous le Creative Commons (CC).  

• Activité 6 : Les images et le bouton de la page d’accueil

Des informations utiles sur la taille des images à employer sur des sites web.

Les sites web suivants offrent des images d’excellentes qualités et libres de droits.

• Unsplash.com

• Stocksnap.io

Webflow

Leçon 9

La section des témoignages

Activité 9 : Suis les directives suivantes pour insérer la section des témoignages.

2019-01-08_06-56-49

Leçon 10


La section de la vidéo

Suis les directives pour insérer la vidéo dans le site web.

2019-01-08_07-09-15

Leçon 11


Le footer

Suis les directives pour insérer la section “Footer”.

2019-01-08_07-14-44

Leçon 12

Les liens

Suis les directives pour insérer les liens.

Leçon 13

La favicon

Suis les directives pour insérer la favicon à ton site web.

Contact

Calendrier de l’école