« Introduction au webdesign/Modèle de boîtes » : différence entre les versions

Contenu supprimé Contenu ajouté
Jeffcom (discussion | contributions)
Aucun résumé des modifications
Jeffcom (discussion | contributions)
Aucun résumé des modifications
Ligne 10 :
 
Ce modèle a la particularité d'utiliser les éléments HTML eux même comme décoration des pages et d'utiliser des tableaux pour disposer les éléments sur les pages web. Il en résulte un positionnement parfait et fixe, mais extrêmement rigide, un code complexe à lire et très lourd, ainsi qu'une accessibilité nulle pour les mal/non-voyants.
 
== Pourquoi a-t-on utilisé ce modèle ? ==
 
Personne ne connaît réellement la réponse... on peut imaginer cependant que l'utilisation d'outils [[w:Wysiwyg|Wysiwyg]] tels que [[w:Dreamweaver|Dreamweaver]] à quelque peu favorisé ce modèle : il était plus "simple" à l'utilisation de placer quelques tableaux que de rajouter une feuille se style sur un texte "linéaire" où tous les éléments apparaissent sur la page dans l'ordre qu'ils sont dans le code source de la page.
 
== Pourquoi est-ce un "mauvais modèle" ? ==
 
=== Premier élément : "c'est pas fait pour ça" ===
 
Il utilise les tableaux pour fixer la mise en page : un tableau n'est pas fait pour ça.
 
Un tableau sert à ordonner des données suivant certains critères, à les classer et à les présenter de manière à pouvoir les comparer simplement, autrement dit dans le jargon : ''présenter des données tabulaires''.
 
=== Deuxième élément : "ça n'est pas accessible" ===
 
Du point de vue d'un "bon-boyant", ça ne changera rien. Mais pour une personne qui "visualise" la page web à l'aide d'un navigateur vocal qui lui lit littéralement le contenu des pages, c'est un supplice : l'ordinateur va lire les cellules du tableau une à une de gauche à droite et de haut en bas. Autant dire que c'est incompréhensible.
 
=== Troisième élément : "c'est figé" ===
 
Ce modèle porte ce nom car les cellules des tableaux sont autant de "boîtes" rigides qui enferment les éléments de la page. Si on veut changer la largeur d'une colonne on change la largeur de toutes les cellules qui sont dessus ou dessous, on doit donc parfois rajouter des tableaux dans les cellules pour avoir un contrôle plus fin de l'affichage... La structure de la page est figée.
 
=== Dernier élément : "la complexité" ===
 
Nous l'avons vu : on est souvent obligé d'imbriquer les tableaux. Il en résulte un code illisible, difficile à maintenir, à modifier, à "re-styler" (à changer d'apparence) et les pages sont très lourdes.
 
== Que faire d'autre ? ==
 
Utiliser les CSS... ça se passe au chapitre suivant