|
|
Il existe plusieurs méthodes pour
positionner les éléments sur une page web.
Une des meilleures méthodes fait appel
à la technique des calques qui
contiennent les éléments à positionner
et que l'on déplace sur la page web.
La technique des calques permet
également de
séparer les caractéristiques de
présentation des
éléments de leur contenu textuel ; cela
correspond
à un certain nombre de normes proposées par le consortium
W3C.
|
 |
Positionner l'élément
central de la page d'accueil
- 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 calques : tous
les éléments sélectionnés
sont englobés dans un calque
indépendant sur la page web
Remarquer l'apparition de la balise div
dans la zone des balises HTML dans le bas de la page.
- Déplace le calque à
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
calque (tu
corrigeras éventuellement la position
ultérieurement).
Si nécessaire , frappe la touche F11 pour voir
l'entièreté de l'animation ci-dessous.
|
 |
Redimensionner le calque
 Les
dimensions du calque 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 de 600 pixels
et une hauteur de 400 pixels
à ce calque.
|
|
Changer la couleur de fond du calque
 Clique
n'importe où dans le calque 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
calque.
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.
- Si nécessaire,
désélectionne le calque (en cliquant sur la
balise body, par exemple) afin de voir la
couleur du calque apparaître.
|
|
Modifier plus finement les
caractéristiques du calque
 Le
positionnement et le changement de taille du calque avec la souris ne
sont pas toujours aisés. Il est plus facile de passer par la
boîte de dialogue des propriétés du
calque.
- Par un clic droit sur la balise div
de la zone des balises HTML, fais apparaître le menu
contextuel qui donne accès aux propriétés
avancées du calque.
|
 |
Une nouvelle boîte de dialogue
apparaît.
Les propriétés qui nous
intéressent se trouvent dans l'onglet Style
interne.
background-color
indique la couleur du fond du calque.
Cette couleur est composée d'un
mélange de 3 couleurs fondamentales : Rouge ( Red),
Vert (Green) et Bleu (Blue).
Dans le système de codage de
l'ordinateur, il
existe 256 nuances pour chacune des couleurs fondamentales. En
mélangeant une teinte de chaque couleur fondamentale, on
fabrique une couleur parmi plus de 16 millions possibles (256x256x256).
Même si tu ne maîtrises pas
parfaitement
l'anglais, la plupart des informations qui figurent dans cette
boîte de dialogue te sont probablement
compréhensibles.
- le bord gauche (left) du calque se trouve
à 150 pixels du bord de la fenêtre.
- le haut (top) du calque se trouve à
8 pixels du bord de la fenêtre.
- la largeur (width) du calque est de
600 pixels
- Il est possible d'indiquer les emplacements et les tailles en pourcentage de la taille de la fenêtre du navigateur ! Cliques ici pour voir un exemple
- la couleur de fond (background-color) est
peut-être moins évidente ; si cela
t'intéresse, une courte explication est donnée
ci-contre.
|
|
Pour modifier l'une des
propriétés du
calque, clique dans le tableau des
propriétés ; le
nom de la propriété s'indique dans la ligne Propriété
dans le bas de la boîte de dialogue.
Change la valeur dans la zone Valeur
située dans le bas de la boîte de dialogue.
- Modifie les propriétés de
ton calque comme indiqué dans la copie d'écran
ci-dessus.
On peut également ajouter des
propriétés qui ne figurent pas encore dans la
boîte de dialogue.
- Dans la ligne Propriété,
indique la hauteur: height, en anglais.
- Dans la zone Valeur,
indique 400px, pour 400 pixels.
Frappe la touche Enter pour confirmer.
Cool ! On peut
inventer toutes les propriétés que l'on veut,
comme ça ?
Pas vraiment,
non ! Le logiciel
attend uniquement un certain nombre de propriétés
bien
connues. Il ne peut évidemment comprendre que ce qu'on lui a
appris à reconnaître.
|
