Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Dreamweaver et tableaux

La structure de base de presque toutes les pages Web HTML est contrôlée à l'aide des tableauw. Dreamweaver rend la création de la table plus facile et beaucoup moins de temps que le codage à la main.

Règles de base de création de tableaux

 

Il y a quelques règles qui, si elles sont suivies, vous rendront la vie beaucoup plus heureuse avec la création des tableaux.
La largeur des colonnes doit être la même tout le long. On ne peut pas avoir une cellule et une largeur de la cellule au-dessus ou au-dessous d'une largeur différente. Il s'agit d'une règle de base du langage HTML.
Le problème est que Dreamweaver vous permettra de saisir manuellement les largeurs différentes pour différentes cellules dans une colonne de même. Un navigateur panique quand il essaye d'ouvrir votre page.
Ive a constaté que c'est la plus grosse erreur de débutants en Dreamweaver dans l'insertion de tableaux. Cliquez dans chaque cellule de chaque colonne. Assurez-vous qu'ils aient la même largeur.
Lire la règle numéro un à nouveau. Elle est importante.
Si les choses se compliquent, utiliser des tableaux imbriquées au lieu de la fusion des cellules. Un tableau imbriqué est un tableau conservé dans un autre tableau. Les tableaux imbriqués sont beaucoup plus faciles à traiter que des cellules fusionnées.
Dessinez votre tableau à la main avant de tenter de le construire dans Dreamweaver. L'ajout ou la suppression de cellules et de lignes peut parfois être problématique après les tableaux commencent à se compliquer.


Construction des tableaux dans Dreamweaver

Pour insérer un tableau dans Dreamweaver:

Cliquez sur Insertion - Tableau >

Insertion d'un tableau dans Dreamweaver

La fenêtre Insérer un tableau s'ouvre. Vous pouvez définir le nombre de lignes et de colonnes, espacement des cellules et rembourrage en pixels, la largeur du tableau en pourcentage ou pixels, et la largeur de la bordure en pixels.

Si vous choisissez une largeur de bordure "0", Dreamweaver vous montre des lignes découpées pour voir le tableau en création mais qui ne vont pas apparaîtrent dans le navigateur.

Cellules tableau avec bordure 0

** IMPORTANT: Un champ de la fenêtre vierge dans Dreamweaver ne veut pas dire "0". Un champ de fenêtre vide signifie "utiliser le HTML par défaut". Par exemple, si vous laissez la fenêtre vierge pour la Marge intérieure des cellules, Dreamweaver utilise automatiquement cellpadding = 4.

Cliquez à l'intérieur de la première cellule et tapez votre nom. Notez que la cellule s'étend. Nous havent encore définir sa largeur.
Assurez-vous que la palette Propriétés est ouverte. (Fenêtre-> Propriétés)

Propriétés du tableau dans Dreamweaver

 

Maintenant, la palette des propriétés affiche les informations sur la cellule sur laquelle vous venez de cliquer. Parfois, il est difficile de dire quelle partie du tableau vous éditez dans l'inspecteur Propriétés. Il y a une manière facile de sélectionner les différentes parties d'un tableau et de déterminer quelle partie est sélectionnée.
Lors de l'édition d'un tableau: Dans le coin inférieur gauche de la fenêtre Dreamweaver, vous verrez les tags du tableau comme <TD> <TR> et <TABLE>

TD-TR Tableau

En cliquant sur la balise appropriée, vous pouvez sélectionner la zone souhaitée du tableau.
Cliquez <table>
Vous remarquerez que les changements de la palette Propriétés pour afficher les attributs de la table.


Modification des attributs de tableau

Modifier attributs du tableau

 

Ce qui suit sont des attributs de tableau que vous pouvez changer sur la ligne supérieure de la palette des propriétés:
Modifiez les paramètres pour voir ce qui se passe. Amusez-vous! Vous ne dérangerez personne. Si vous êtes vraiment inquiet, vous pouvez les définir en revenant à ce qu'ils étaient.

Lignes: Le nombre total de lignes dans le tableau

Cols: Le nombre total de colonnes dans le tableau

L: largeur du tableau, en pixels ou en%

H: Hauteur de la table, en pixels ou en%

Remplissage: Marge intérieure des cellules de la table. Marge intérieure des cellules est l'espace entre chaque paroi de la cellule et le contenu des cellules

Espac: Espacement des cellules du tableau. Espacement des cellules est l'espace en pixels entre chaque cellule.

Aligner: L'alignement du tableau par rapport à la page.

Bordure: La bordure du tableau en pixels.

Ce qui suit sont des attributs du tableau que vous pouvez changer sur la ligne du bas de la palette des propriétés:

supprimer attributs tableauColonne Effacer hauteurs de ligne et largeurs de colonnes: ces boutons peuvent être utilisés pour effacer tous les paramètres de colonnes et de lignes si votre tableau est sérieusement foiré. Vous aurez à ré-entrer vos valeurs de largeur et de hauteur, mais au moins vous n'aurez pas à reconstruire l'ensemble du tableau. Ce bouton permet aux utilisateurs de Dreamweaver qui ont ignoré la règle de garder vos largeurs de colonnes les même tout au long.

Changer espace vertical du tableauChanger Pixels au pourcentage / pourcentage à Pixels: Ces boutons permettent de convertir les tableaux de pourcentage à base de pixels et vice versa.

Vspace: (espace vertical) l'espace entre le tableau et tout ce qui se trouve au-dessus ou en dessous.

Hspace: (espace horizontal) l'espace entre le tableau et ce qu'il y a à gauche ou à droite de celui-ci.

BG: Vous pouvez définir une couleur de fond ou une image. Notez que Netscape ne prend pas en charge les images d'arrièd'arrière-plan d'un tableau.


Sélection de cellules multiples

En sélectionnant les cellules multiples on peut appliquer la même mise en forme à plusieurs cellules en même temps.
Pour sélectionner plusieurs cellules:

* Cliquez et faites glisser sur les cellules que vous souhaitez sélectionner

* Ctrl + clic ou Cmd + clic

* Maj + clic. Si vous cliquez sur une cellule puis cliquez sur Shift + une autre Dreamweaver sélectionne les deux cellules.

* Sélectionnez une ligne ou une colonne entière: Si vous placez votre curseur directement à la droite de n'importe quelle ligne ou directement au-dessus d'une colonne, votre curseur se transforme en flèche noire. Cliquez dessus, et toute la rangée / colonne sera sélectionné.

Modification des propriétés des cellules avec la palette des propriétés
Cliquez sur une cellule. Notez que les changements de la palette des Propriétés sont pour afficher les valeurs changeantes de la cellule. La rangée supérieure de la palette Propriétés est pour le texte dans la cellule. Chaque cellule est traitée comme une petite page à part entière. Vous aurez à réinitialiser votre formatage de la police.

Ce qui suit sont des attributs de cellules que vous pouvez changer sur la palette des propriétés:

Fusionner et fractionner des cellules avec DreamweaverFusionner / Fractionner les cellules: Pour fusionner ou fractionner des cellules en utilisant ROWSPAN et CELLSPAN, sélectionnez les cellules à fusionner / diviser et cliquez sur ce bouton. N'oubliez pas que pour des tableaux compliqués, il serait mieux d'utiliser fusion / fractionner des cellules.

Horz: (alignement des cellules horizontale) Aligne horizontalement le texte dans une cellule

Vert: (Alignement de la cellule verticale) aligne verticalement du texte dans une cellule.

W: largeur de cellule. Si vous voulez un %, vous devez ajouter manuellement l'%. Laissez ce champ vide dans l'attribut si vous voulez que la colonne se redimensionne automatiquement en fonction de la taille de l'écran.

H: hauteur de cellule. Vous pouvez définir une hauteur aux cellules, mais il est généralement préférable de ne pas se soucier de la hauteur. La cellule peut être nécessaire de modifier la taille en fonction des paramètres du moniteur de l'utilisateur du site.

Nota: Vous pouvez définir une couleur de fond ou une image pour chaque cellule. Les couleurs de fond des cellules et des images remplacent les couleurs du tableau ou des images.

Brdr: Couleur de la bordure pour les cellules individuelles.
Voyez si vous pouvez construire le tableau ci-dessous:

En utilisant les images d'espacement

Les images seront redimensionnées s'elles plus grandes que la cellule. Cela peut être utile car une colonne va s'effondrer si elle n'a rien en soi. Vous pouvez utiliser un gif transparent, appelé une image d'espacement ou de cale, pour garder une colonne de s'effondrer. Correctement dimensionné, un gif tiendra une cellule ouverte à la hauteur ou la largeur des images.

Le gif est un seul carré de pixels. C'est le plus petit fichier que vous pouvez faire. Après avoir inséré le gif, vous pouvez immédiatement le redimensionner en hauteur et en largeur.
Insérez le gif dans une cellule.
Redimensionner le gif à H: 200

** Vous êtes mieux de la mise en hauteur ou de largeur, mais pas les deux. Netscape affiche un graphique stupide entouré par une boîte pendant le chargement des images. Le graphique est source de confusion et de l'air mauvais, mais ne peut pas être vu s'il est à moins d'un pixel de haut (ou large)


Tableaux imbriquées

 

Rappelez-vous que vous allez utiliser des tableaux imbriquées pour faire des tableaux compliqués mais faciles. Dreamweaver rend les tableaux imbriqués incroyablement faciles.
Pour créer un tableau imbriqué dans Dreamweaver:
Cliquez à l'intérieur d'une cellule
Cliquez sur Insérer-> TABLEAU
Sélectionnez ce que vous voulez sélectionner

Sélection d'un tableau entier imbriqué peut parfois se compliquer. Rappelez-vous que vous avez les balises de tableau dans le coin inférieur gauche de la fenêtre Dreamweaver.

Vous cliquez sur la balise <table> imbriquée. Notez qu'il y a deux balises de tableau. La première est pour le tableau principal.

Création de tableaux à l'aide du mode Mise en tableau

Dreamweaver a une fonctionnalité qui vous permet de dessiner des tableaux dans ce qu'elle appelle la mise en page. Bien que des tableaux à dessin sont facile, il vous reste à comprendre la vision de tablaue standard pour pouvoir utiliser correctement Dreamweaver.

Pour ouvrir Affichage en mode Tableau, cliquez sur:

Affichage-> Mode Tableau >> Mode Tableaux Développés
(Une des fenêtres pop-up s'ouvre. Vous pouvez la fermer)

Lorsque vous entrez dans la vue Mise en page, vous verrez que la palette d'objets s'ouvre automatiquement. Au bas de la palette Objets sont les boutons qui vous utilisez pour contrôler les tableaux de construction en mode Création.

Dessiner des cellules: les cellules en tirant est le bouton le plus utile. Vous pouvez juste, bien, dessiner des cellules. Il est inutile de tirer un premier tableau. Lorsque vous dessinez une cellule, Dreamweaver dessine automatiquement un tableau. La hauteur du tableau a l'air trop grande au début, mais elle est redimensionnée en fonction des cellules que vous dessinez.

Après avoir dessiné une cellule, vous pouvez la redimensionner en faisant glisser ses poignées ou de changer la largeur et la hauteur à l'inspecteur Propriétés.

Maintenez la touche Ctrl / Cmd pour dessiner des cellules multiples.

Dessiner un tableau de Mise en page

Dreamweaver crée automatiquement un tableau lorsque vous commencez à dessiner des cellules, mais si vous voulez imbriquer des tableaux, utilisez le bouton Tableau de Mise en page.

Définition d'une colonne à redimensionner automatiquement

Définir une colonne pour s'étirer automatiquement sur les grands écrans est facile en mode Mise en page. D'abord, vous devez vous assurer que la colonne est une colonne unique tout le long. Si la colonne fait partie d'une cellule fusionnée, ou si une cellule fusionnée croise la colonne, il ne sera pas redimensionnée correctement.

Il suffit de cliquer sur la largeur de colonne déroulant et choisir Extension automatique de la colonne.

Dreamweaver insère une image d'espacement dans les cellules restantes afin de s'assurer qu'ils tiennent leur taille correcte. Allez-y!

Haut de page

Dreamweaver® est une marque déposée d'Adobe® Systems Incorporated. Les logos et les noms de marques cités dans ce site sont les propriétés respectives de leurs développeurs.

 

Création de sites web

hit counter