Mot de passe oublié ? Créer un compte

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

Le Mardi 22 mars 2011, Posté par dans Formation Dreamweaver.

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
Organiser l’interface d'un site avec un tableau dans Deamweaver
– 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.
Organiser l’interface d'un site avec un tableau dans Deamweaver
1- Dans la première case, insérez une image qui servira d’entête pour le site (tutoriel Comment insérer une image dans un tableau)
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.
Organiser l’interface d'un site avec un tableau dans Deamweaver
Puis cliquez sur OK.
– Ajoutez autant de boutons que d’éléments de votre menu.
Organiser l’interface d'un site avec un tableau dans Deamweaver
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.
Organiser l’interface d'un site avec un tableau dans Deamweaver
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 :
Organiser l’interface d'un site avec un tableau dans Deamweaver

Ajouter un commentaire :

- Avant de poser une question, merci de bien lire le tutoriel.
- Pour signaler une erreur merci de nous contacter, utilisez ce formulaire.
Nom * :
Email * (non publié) :