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.
- 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
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.
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
- 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é.
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.
|