Utilisation du logiciel NVU

Mise en place des blocs pour la mise en page de la page.

Il existe plusieurs méthodes pour positionner les éléments sur une page web.

Une des meilleures méthodes fait appel à la technique des blocs qui contiennent les éléments à positionner et que l'on déplace sur la page web.


Positionner l'élément central de la page d'accueil

La technique à utiliser pour positionner la partie centrale de la page d'accueil est illustrée dans l'animation ci-dessous. Visualise-la entièrement avant de passer à l'action.
Si nécessaire , frappe la touche F11 pour voir l'entièreté de l'animation.

  • Sélectionne l'ensemble des éléments présentés sur ta page d'accueil.
Dissocier du texte

  • Clique sur le bouton Dissocier du texte de la barre d'outil des blocs : tous les éléments sélectionnés sont englobés dans un bloc indépendant sur la page web


  • Déplace le bloc à environ 200 pixels du bord droit de la fenêtre par un cliquer/glisser de la poignée située en haut et à gauche du bloc (tu corrigeras éventuellement la position ultérieurement).

Redimensionner le bloc

Poignées latérales

Les dimensions du bloc créé sont ajustées aux éléments qu'il contient. On peut le redimensionner aisément si la taille actuelle ne nous convient pas.

  • Par un cliquer/glisser des poignées latérales et en utilisant les indications données par l'infobulle, donne
    • une largeur approximative de 600 pixels et
    • une hauteur approximative de 400 pixels à ce bloc.
  • Les proportions du résultat final ressemblent à celles de l'illustration ci-dessous.

Résultat final

Attention, il se pourrait que la hauteur 400 px ne soit pas suffisante pour le contenu du bloc. Nous résoudrons ce problème un peu plus loin.

Changer la couleur de fond du bloc

Clic sur la balise div
  • Clique n'importe où dans le bloc créé afin d'y positionner le curseur de texte.
  • Clique sur la balise div dans la zone des balises HTML, sélectionne l'ensemble du bloc.

La barre d'outils de mise en forme contient un bouton qui permet de modifier la couleur de l'arrière plan de l'élément sélectionné.

Couleur de fond

L'élément en noir sur l'illustration ci-contre permet de choisir la couleur du texte. L'élément en blanc permet de choisir la couleur de fond.

  • Clique sur l'élément blanc du bouton de choix des couleurs.
  • Sélectionne la couleur qui te convient (pas trop sombre, afin de pouvoir lire le texte noir) dans la boîte de dialogue de choix des couleurs.

 Ben... J'ai beau changer la couleur de fond comme je veux, il ne se passe rien du tout dans le bloc. Il n'y aurait pas un problème là ?

Mmmmhhh... Exact, il y a un petit problème. On pourrait même parler d'un petit bug. Mais la solution toute simple est donnée ci-dessous.

  • Si nécessaire, dé-sélectionne le bloc (en cliquant sur la balise body, par exemple) afin de voir la couleur du bloc apparaître.

Quand le bloc central de ta page d'accueil est au point, soumets-le au professeur puis passe à la page suivante.