La mise en page


La mise en page de votre site web est la partie principale de votre site. Il faudra garder le même style pour l'ensemble de votre site (recommandé).
L'idée, est donc de faire une page qui vous servira de modèle. Ensuite au fur et à mesure que votre site grandira, il suffira de prendre ce modèle et de "l'habiller" selon le thème de votre nouvelle page.

Alors, autant faire ce modèle convenablement car si vous décidez de changer de look, il faudra le faire sur toutes les pages..., donc, réfléchissez bien avan de vous lancer "tête baissée" dans votre éditeur HTML.

Pour la mise en page, on a souvent recours aux tableaux. Ils sont faciles à mettre en place.
La partie supérieure de cette page par exemple, est un tableau divisée en 3 parties: le logo à gauche, le titre au centre et la pub à droite. Ce tableau est invisible car il n'a pas de bordure, tout simplement. En HTML: border="0" ;

Avec une bordure visible, cela donnerait ça:

Mise en page avec un tableau


Comment faire sous NVU sans se prendre le chou avec le HTML ?:

Insérez tout d'abord un tableau dans votre page: Menu / Insertion / Tableau
Choisissez le nombre de lignes et de colonnes, puis l'insertion du tableau se fait à l'endroit de votre curseur:
Insertion d'un tableau avec NVU
Double-cliquez dans votre tableau et la fenêtre des propriétés doit apparaitre:

Propriétés du tableau avec NVU En haut , vous avez 2 onglets: Tableau et Cellules. Sélectionnez Tableau:
Vous pouvez modifier la taille du tableau (ligne et colonne) en pixel ou en % de la cellule.
Au niveau de la bordure, si vous mettez 0, la bordure disparait (voir l'exemple plus haut), sinon, vous aurez une bordure  d'une largeur avec le nombre de pixels de votre choix.
Plus bas, vous avez le choix pour l'alignement de votre tableau (droite, gauche ou au centre.

Vous pouvez même choisir une couleur de fond différente de la couleur de votre page.

Si vous faites un affichage de la source (en bas de page avec NVU: onglet Source), vous pouvez voir le code HTML généré à votre place.
Exemple: <table  style="text-align: left; margin-left: auto; margin-right: auto;"  align="center" border="0" cellpadding="2" cellspacing="2">.

Vous pouvez donc changer les caractéristiques de votre tableau en modifiant directement le code HTML. Vous avez le choix entre les 2 méthodes.


Concernant la mise en page "générale" de votre site, un exemple "classique" c'est de mettre le menu à gauche (ou au centre):


Menu à gauche Menu au centre
Titre
Menu







 Page centrale
Pied de page
Titre
Menu

Page centrale
Pied de page


Maintenant que vous savez insérer des tableaux, il faut savoir insérer des photos (c'est mieux !!). Pour ces dernières, il est facile de les intégrer à votre page: cliquez sur l'icône Image ou Menu / Insertion / Image... .Cette fenêtre apparait:

Mise en page des photos pour NVU

Cliquez sur Parcourir .... Cette fenêtre apparait:

Misen page des photos pour NVU


Choisissez votre photo pus cliquez sur Ouvrir.
Saisissez un texte alternatif (voir chapître photos pour plus de détails), puis cliquez sur OK.
La photo apparait alors à l'endroit ou était votre curseur.

Comment positionner mon texte par rapport à cette photo ?

Double-cliquez sur votre photo, la fenêtre des propriétés apparait (principe identique que les tableaux):

Propiétés des photos sous NVU Cliquez sur l'onglet "Apparence".
Si vous cliquez sur l'ascenseur "Placement du texte", vous avez 5 possibilités: haut, centre, bas, gauche et droite.

Toutes ces possiblités seront détaillées en détail ultérieurement.


Quelques conseils:

  • Evitez les couleurs criardes (préférez le pastel). 
  • Fuyez les menus Javascript ou Flash.
  • Pensez à insérer en bas de page un "retour" à votre page principale (index.htm ou index.html).
  • Evitez également les liens morts (erreur 404), rien de plus désagréable !!!
  • Pas de frame également !! Faites simple !!