Organiser l’interface d’un site avec un tableau dans Deamweaver

Les tableaux dans Dreamweaver ne servent pas seulement à contenir des informations à afficher, mais ce sont aussi un moyen d’organisation de l’interface de vos pages web, en effet à l’aide des tableaux vous pouvez structurer vos pages pour avoir un entête, une partie pour le menu, une partie principale qui contiendra l’essentiel du site et un pied de page.

Comment utiliser un tableau pour organiser l’interface d’un site dans Dreamweaver?

– Dans les outils d’insertion, sous Commun, cliquez sur l’icône d’insertion de tableau

– Pour cet exemple on va structurer les pages de notre site en 4 parties :
• Un entête contenant une image.
• Un menu.
• La partie principale de la page, avec un 2ème menu.
• Un pied de page.
C’est pourquoi on aura besoin d’un tableau de 4 lignes et une seule colonne.
– Une fois le tableau créé, dans la barre des propriétés en bas alignez-le au centre.

1- Dans la première case, insérez une image qui servira d’entête pour le site ( tutoriel ).
2- Pour le menu, on va insérer des boutons Flash, pour cela :
– cliquez sur la 2ème case.
– dans le menu insertion, allez dans Média, et sélectionnez « Bouton Flash ».
– choisissez le type de bouton à insérer et tapez le texte du bouton.

Puis cliquez sur OK.
– Ajoutez autant de boutons que d’éléments de votre menu.

3- Pour la 3ème case, on va la diviser en 2 parties une qui contiendra un second menu et l’autre partie (plus importante) pour le contenu du site.
– Cliquez sur la case, et dans la barre des paramètres en bas cliquez sur l’icône de division de cases.

Cochez colonne, spécifier le nombre à 2 et cliquez sur OK.
– Redimensionnez la partie gauche (qui contiendra le second menu) en diminuant sa largeur.
– Créez le nouveau menu de la même façon que pour le premier (avec des boutons flash).
– Mettez le contenu principal qui peut être un texte, une image, …etc. dans le corps de la page (partie droite de la 3ème case).
4- Pour le pied de page c’est généralement un texte spécifiant le nom du site, de ses créateurs et potentiellement indiquant que les droits sont réservés à ses derniers.
Résultat final :