• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 24/08/2020

Décomposez la structure des pages

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Découvrez le fil rouge de ce cours

Dans ce cours, vous apprendrez à créer un exemple de site web, et quoi de plus approprié qu'une plateforme d'apprentissage en ligne !

Le site que vous créerez s'adresse à une école d’informatique (Info School) dans laquelle les étudiants peuvent se former aux métiers du développement informatique.

Vous commencerez par intégrer des maquettes de l'aspect général du site final. Notre site contiendra une diversité de contenus et d'interactions utilisateur que vous implémenterez dans Bootstrap 4 au fil des chapitres.

Analysez la conception des pages

Examinons la conception des pages que nous implémenterons, afin que vous puissiez comprendre comment elles peuvent être décomposées en sections distinctes.

Nous allons commencer par de grands écrans et vous verrez leur évolution pour des écrans réduits (mobiles) plus loin dans ce cours.

Page d'accueil

L'image-ci dessous montre l'aspect final de la page d'accueil. Le contenu mis en avant se situe dans la zone hero du site. Un groupe de cartes d'information listant les avantages à s'inscrire sur le site se trouve en-dessous de la zone hero.

Conception de la page d'accueil pour les grands écrans
Conception de la page d'accueil pour les grands écrans

Page des cours

L'image suivante montre la page des cours. Elle contient une liste de leçons disponibles sur le site.

Conception de la page des cours pour de grands écrans
Conception de la page des cours pour de grands écrans

Page de détails du cours

L'image ci-dessous montre la page Détails du cours. Elle propose une vidéo didactique ainsi qu’une description du cours, tels que le titre, les objectifs d'apprentissage et un formulaire de prise de notes.

Conception de la page Détails du cours pour de grands écrans
Conception de la page Détails du cours pour de grands écrans

Décomposez les pages

Vous remarquez que les différentes pages ont des sections en commun, telles que la section d’en-tête. ll est important pour un site web de proposer une uniformité à la fois dans la structure du site, mais aussi dans son apparence graphique générale. Grâce à cela, vos utilisateurs peuvent facilement se repérer et naviguer sur le site.

Décomposer les pages de cette façon permet de créer des sections communes de fichiers HTML, qui peuvent être réutilisées sur les pages. Vous obtenez ainsi une mise en page générale cohérente tout au long du site.

Examinons comment vous pouvez décomposer les pages en sections communes.

Section d'en-tête

Conception de la section d'en-tête pour de grands écrans
Conception de la section d'en-tête pour de grands écrans

Le haut de la page est la section d'en-tête qui contient le branding (le logo, la marque) et la navigation. Le contenu reste plus ou moins identique, quelle que soit la page que vous consultez.

La section de navigation contient généralement des liens vers les parties principales du site web, auxquelles les utilisateurs et les visiteurs accèdent le plus souvent.

Section de pied de page

Conception de section de pied de page pour de grands écrans
Conception de section de pied de page pour de grands écrans

Traditionnellement, la plupart des pages web possèdent une section de pied de page qui contient des détails sur le site et des liens vers les parties les moins consultées d'un site, telles que les informations de la société ou de l'organisation. Cette section contient également les parties juridiques, comme les conditions d'utilisation et les avis de copyright. Comme avec la section d'en-tête, le contenu reste identique sur le site.

Section de contenu

Section de contenu de la page d'accueil pour de grands écrans
Section de contenu de la page d'accueil pour de grands écrans

Nous définirons la section de contenu comme étant tout ce qui se trouve après l'en-tête et avant le pied de page. C'est là que se trouvera le contenu qui varie d'une page à l'autre. L'image ci-dessus montre la section de contenu de la page d'accueil.

En résumé

  • Notre site sera composé de différentes pages comme la page d'accueil, la page des cours et la page de détail des cours.

  • Chaque page est divisée en plusieurs sections : en-tête, pied de page, section de contenu.

  • L'en-tête et le pied de page restent généralement les mêmes sur toutes les pages d'un site.

  • La section de contenu est celle qui variera en fonction des pages.

Maintenant que vous connaissez à quoi ressemblera le site que vous réaliserez, vous êtes prêt à commencer à le créer à l'aide de Bootstrap.

Exemple de certificat de réussite
Exemple de certificat de réussite