votre page est un peu basique pour l instant mais avant de lui donner
de la mise en forme il faut preparer la
structure de la page
il va faloir mettre un menu de navigation et differents cadres
permettant de separer les informations que vous voullez mettre sur
votre page
pour cela on utilise des conteneurs (balise <div>)
Nous allons creer une nouvelle page avec 4 conteneurs allez
dans "source" et (re)copiez le texte qui suit (toujours entre <body> et </body>)
<div id="haut">c'est ici que vous allez mettre votre
banniere</div>
<div id="menu">c'est ici que vous mettrez le menu de navigation sur votre site </div>
<div id="centre">
c'est ici que sera le coeur de votre page
on va aussi mettre un lien pour que vous puissiez revenir sur cette page
</div>
<div id="bas">c'est ici que vous allez mettre un rappel du menu </div>
voir le resultat de cette page
pas tres jolie pour l instant
Un peu de couleurs quand meme ???
on va aborder la mise en forme a l aider de l outils editeur de css dans NVU ( outils / editeur CSS...)
cliquez sur
feuille incorporee et sans rien ajouter cliquez sur
cree la feuille de style
une feuille de style interne c'est crée
selectionnez la et cliquer sur regle
selectionner
style appliquer a tous les elements correspondant au selecteur su dessous
et en dessous tapez
body
et
cliquez sur creer la regle
on viens de selectionner la balise <body>(qui est la balise de la page complete)
une fois que vous avez selectionne body en dessous de feuille de style interne (cliquez sur + ) vous pouvez acceder aux onglets ( general , texte , fond , bordure , boite , listee , audio )
selectionnez fond
et selectionner une couleurs de fond de page
puis cliquez sur fermer
et votre fond de page viens de changer de couleurs
voir le resultat de la page
on va donc recreer des regles et changer les couleurs de fond pour les balises haut ,menu,centre,bas
mais en ajoutant # devant
sinon c'est exactement la meme procedure
ce qui doit donner
feuille de style interne
body
#haut
#menu
#centre
#bas
voir le resultat de la page
on va maintenat definir la taille de chacun de nos conteneur
Il faut sélectionner la balise que vous vouller modifier et rectifier les donnees
dans l onglet boite
BODY
largeur 900px
#haut
largeur 900px
hauteur 100px
#menu
largeur 120px
hauteur 300px
#centre
largeur 760px
hauteur 500 px
# bas
largeur 900 px
hauteur
25 px
voir le resultat de la page
Mais on s'appercoit que tout ne s'emboite pas très bien
on va donc modifier leurs positionnements sur la page
BODY
largeur 900px
marge gauche : auto
marge droite : auto
#haut
largeur 900px
hauteur 100px
#menu
largeur 120px
hauteur 300px
flottante : gauche
marge gauche : 10 px
marge haut : 10px
#centre
largeur 760px
hauteur 500 px
marge gauche : 140 px
marge haut : 10px
# bas
largeur 900 px
hauteur
25 px
# menu
flottante gauche (ou droite comme vous voullez)
fermer
et voila le resultat de la page que l on viens de modifier ;Beacoup mieux non ???
allons a la page suivante pour comprendre comment faire un menu des cadres des tableaux
------------------------------ ici------------------------------