[Etape 1]
Il faut tout d'abord créer les différents éléments
graphiques nécessaires (l'équivalent de ce que
vous trouvez dans les kits graphiques de base). Cela comprend
dans mon exemple les images au dessus et au dessous des zones
de texte (les vaguelettes violettes) et le header,
mais vous pouvez également préparer vos propres
boutons, flèches, icônes... si vous en avez besoin.
par exemple:
ou:
[Etape 2]
Entamons le vif du sujet. Il faut réfléchir
à la structure «spatiale» de la page. Dans
mon cas, il y a deux grands blocs (laissons le header de côté)
: le menu, à gauche, et la zone de texte, à
droite.
Nous allons donc créer un tableau principal (750 à
780 px de large, 5 colonnes (2 pour les blocs, et 3 pour les
séparations gauche-droite-milieu de ces blocs), 1 ligne,
0 de marge et 0 de bordure) destiné à contenir
ces blocs.
Choisissez ensuite une largeur pour les colonnes 1, 3, et
5. Elles serviront uniquement de marge. Définissons
également une couleur ou une image de fond de cellule.
[Etape 3]
Maintenant que les grands blocs sont définis, nous
allons nous intéresser plus en détail à
chacun d'entre eux.
La seconde colonne va contenir le menu. Dans mon cas, elle
fait 163 px de large. Créons un tableau à l’intérieur
de cette colonne, tableau qui nous servira exclusivement à
gérer le menu*.
Le nouveau tableau fait donc 163 px également, est
composé d’une unique colonne, et de x lignes
(comptez 4 lignes par bloc de menu). Dans les propriétés
du tableau, choisissez « Haut » dans les propriétés
du tableau, concernant l'alignement vertical. Comme cela,
le tableau restera toujours "bloqué" à
la marge superieure, et n'aura pas tendance a descendre.
Mettons en place le menu.
Dans la première ligne, insérez l'image que
vous souhaitez voir apparaître au dessus du menu (ici
le « Site » sur fond violet). Dans la cellule
en dessous, écrivez vos différentes rubriques,
puis choisissez la couleur ou l'image de fond de la cellule.
Insérez enfin dans la cellule encore plus bas l'image
clôturant le bloc du menu (ici les vaguelettes violettes).
Vous devriez arriver à ça :
Laissez alors une cellule d'espacement (d'où les 4
cellules par bloc de menu) puis continuez avec le bloc suivant.
[*l'intérêt de créer
un tableau à l'intérieur d'un autre est très
grand. En effet, si vous n'aviez qu'un unique tableau, la
modification de la hauteur dans l'une des cellules se répercuterait
dans l'ensemble du document.
Ainsi, si votre espace de texte venait a évoluer
en hauteur, le menu de gauche se retrouverait totalement
déstructuré, puisque chaque cellule verrait
sa hauteur augmenter, laissant apparaître des «
vides » entre chaque cellule.
L'insertion d'un autre tableau rend chaque bloc indépendant.
dans ce schéma, la cellule à gauche de la
cellule grisée est totalement chamboulée,
ce qui casse l'organisation globale de la colonne de gauche]
|
|
[Etape 4]
Maintenant, faisons de même avec la zone de texte
: créons un tableau d'une ou deux colonnes (suivant
l'effet que l'on veut donner à sa mise en page) dans
la quatrième colonne du tableau principal.
Choisissons une couleur de fond de cellule. De même
que dans le point précèdent, ajoutons les
petites guignoleries en haut et en bas.
Si tout se passe bien, nous devrions arriver à cela
:
[Etape 5]
Cela commence à prendre tournure. Pour rendre plus
esthétique l'ensemble, nous allons créer un
tableau d'une ligne juste au dessus du tableau principal
(je l'ai volontairement espacé sur la photo d'écran).
Remplissons le avec la couleur de fond. Ce tableau joue
le rôle de marge supérieur. (Il est préférable
de créer un tel tableau plutôt que d'utiliser
une ligne faite pour ça, en haut du tableau principal).
Si l'on souhaite donner un aspect plus arrondis à
l'ensemble, il suffit, comme je l'ai fait, de créer
une petite image d'arrondis, avec les couleurs de la cellule
et du fond d'écran :
Puis de l'inserer dans ce tableau, aligné à
gauche (ou a droite dans le coin opposé...)
[Détails]
Pour le header, ou pour tout ajout, il suffit de créer
un nouveau tableau adapté a ce que l'on veut faire.
- Si vous n'avez pas compris l'embriquement
des tableaux, voila un petit schema recapitulatif:
En gris, les marges. En rouge, les insertions de tableau
dans le tableau principal (bord noir exterieur).
- Parfois il peut etre utile d'inserer une
image transparante pour créer une petite marge, sans
avoir à faire un tableau pour cela.
- Si le nombre de ligne ou de colonne que vous avez n'est
pas suffisant, il suffit d'en rajouter (option Modifier
> Tableau > Insertion de ligne... sous DreamWeaver).
Vous pouvez également jouer avec les options de fusion/division
de cellule, disponible dans la fenêtre des proprietés
du tableau sous DreamWeaver.
Pour toutes questions sur les tableaux, vous pouvez consulter
la rubrique Aide > Didactitiels > Tableaux de DreamWeaver,
qui est assez bien faite.
Voilà, c'est fini !
lexique:
header: (de l'anglais head, tête)
zone de titre situé en haut de page, souvent avec
le logo, le nom du site, un bandeau publicitaire..
|
Ce tutorial a pour but de vous initier à la création
d'une page Web simple, à l'aide de tableaux. J'ai pris
exemple sur ma première et laborieuse création
d'un tel site.
Sujet : Réaliser une page
web 
Niveau : 
Auteur : Jabric [
cliquez ici pour imprimer la page
