Utilisation des tableaux dans Dreamweaver

Transcription

1 Utilisation des tableaux dans Dreamweaver Ecole-Club Migros Alain Court

2 Usages des tableaux Le tableau en HTML a été la première réponse aux besoins de mise en page. En effet, le langage HTML n'est pas vraiment destiné à gérer précisément le positionnement du texte et des images. Cette application a connue une très grand développement jusqu'à aujourd'hui où les CSS (feuilles de styles) permettent de séparer de façon beaucoup plus nette la forme et le contenu d'une page Web La mise en page à l'aide des tableaux peut devenir extrêmement complexe, et la transformation d'un page parfois impossible, nécessitant de tout reconstruire pour changer de format. Heureusement Dreamweaver fournit de nombreuses aides dans ce domaine. Exemples

3 Les tableaux de données L'autre usage principal est de présenter les données tabulaires (comme une liste de prix par exemple) En important des documents Excel En convertissant des données tabulaires (fichiers de données dont les colonnes et lignes sont identifiés par des caractères de séparation : espace, tabulation,etc ) En saisissant les données dans Dreamweaver

4 Insertion d'un tableau Toutes les dimensions d'une tableau peuvent être exprimées en pixels (taille fixe) ou en %age (variable selon la taille de la fenêtre d'affichage)

5 Exercice 1 Créez une nouvelle page nommée "tableau.html" Insérez un tableau contenant les prénoms, ville et profession des participants p de ce cours Modifiez votre tableau pour qu'il mesure 400 pixels de long Puis faite en sorte qu'il occupe 80% de la largeur de la fenêtre de votre navigateur Modifiez la hauteur du tableau en pixels Modifiez la largeur d'une colonne Changez la couleur des colonnes, rangées et textes de titre du tableau Sélecteur rapide de balises du tableau

6 Les dimensions d'un tableau Un tableau peut avoir des dimensions absolues (en pixels) et relatives (%age de la taille de la fenêtre) Ces dimensions peuvent être combinées au sein d'un même tableau, mais lorsque des tailles absolues sont employées une cohérence d'ensemble doit être respectée par exemple : largeur tableau = 400 px, la somme des largeurs de colonnes doit être égale à 400, sinon les résultats à l'affichage ne sont plus prévisibles Lors de la saisie de données dans un tableau, les colonnes vides peuvent se rétrécir (tant qu'elles sont vides) d'où l'utilité du mode "développé" dans la palette "Mise en forme"

7 Exercice 2 - Tableau de données Variante 1 : Dans une nouvelle page nommée "tarifs.html html" importez le document Excel "Tarifs.xls" (dossier "composants tableaux") Mettez en forme ce tableau selon votre gout, en faisant en sorte qu'il s'adapte automatiquement à la dimension de la largeur de page du navigateur Variante 2 : importez les données du fichier "tabdelimited.txt" (dossier "composants tableaux") puis mettez en forme le tableau produit

8 Exercice 3 - mise en page Créez une nouvelle page nommée "mise en page" Dans cette page créez un tableau afin de positionner au centre et en haut de la page 3 boutons flash pour accéder au différentes pages de votre site. Centrer les boutons dans chaque cellule du tableau (appliquer l'alignement aux cellules et non pas aux boutons) Modifiez la couleur de la page et la couleur du tableau selon Modifiez la couleur de la page et la couleur du tableau selon votre propre goût

9 Mise en page libre avec les tableaux et cellules de mise en forme Difficile de fabriquer une mise en forme de ce genre en construisant les tableaux de manière traditionnelle

10 Les tableaux de mise en forme En utilisant le mode "mise en forme" vous avez la possibilité de dessiner votre mise en forme. Utilisez d'abord l'outil "tableau de mise en forme", puis dessinez les zones avec "Dessiner la mise en forme" Dreamweaver va adapter le tableau en fonction dee vos insertion de cellule Cette méthode offre la plus grande liberté pour construire votre mise en page Lorsqu'une image est insérée é dans une cellule, l ses dimensions i doivent être adaptées à la cellule (ou l'inverse si vous voulez pas déformer l'image

11 Exercice 4 Fabriquez une mise en page selon votre goût au moyen des images fournies dans le dossier "images" (vous pouvez également e employer du texte de remplissage à l'aide du site Variante 1 : adaptez la taille des images insérées en fonction de la taille des cellules que vous avez créée Variante 2 : adaptez la taille des cellules en fonction des Variante 2 : adaptez la taille des cellules en fonction des images que vous souhaitez insérer

12 Conclusion Vous disposez maintenant de toues les compétences nécessaires pour composer les pages selon votre goût. De nombreuses mise en page sont disponibles gratuitement : Modèles gratuits de mise en page : Les meilleurs designs du Web : com/ (pour trouver de l'inspiration. Attention certaines mises en pages emploient des technologies que nous n'avons pas encore abordées)