page 1 Sandrine Prom Tep, M.Sc & Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés Conception de sites Web Préparé par Sandrine Prom Tep, M.Sc. À partir du cours de : Yan Bodain, M.A. Jean-Yves Fiset, ing., Ph. D.

page 2 Sandrine Prom Tep, M.Sc & Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. Cours 7 Utilisation des tableaux –Avantages –Applications types –Inconvénients –Principales balises et attributs des tableaux Utilisation des cadres ("frames") –Avantages –Inconvénients –Applications types

page 3 Sandrine Prom Tep, M.Sc & Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. Utilisation des tableaux Avantages –Mise en page, –Possibilité de créer zones spéciales (« sidebars »), –Outil pour atteindre certaine indépendance par rapport à la résolution. attribut « width » en pixels ou en % Application type : –Aide à la localisation d’éléments sur une page. Inconvénients : –Balises plus sophistiquées, parfois complexes.

page 4 Sandrine Prom Tep, M.Sc & Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. <TABLE texte texte texte texte texte texte Les tableaux sont indispensables dans la construction de page HTML. Ils assurent le positionnement des éléments composants la page. Structure de base d’un tableau: Balises et attributs des tableaux Notions de base Sandrine Prom Tep, Mai 2003

page 5 Sandrine Prom Tep, M.Sc & Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. Balises et attributs des tableaux Ligne Colonne BORDER HEIGHT WIDTH Sandrine Prom Tep, Mai 2003 ROWSPAN (cellules fusionnées) COLSPAN (cellules fusionnées)

page 6 Sandrine Prom Tep, M.Sc & Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. Balises et attributs des tableaux exemple de code Sandrine Prom Tep, Mai 2003

page 7 Sandrine Prom Tep, M.Sc & Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. Balises et attributs des tableaux affichage de contenu dans une cellule CELLPADDING CELLSPACING VALIGN ALIGN Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. BGCOLOR Bgcolor= "#CCCCCC" N.B. : les attributs des tableaux répondent à un ordre hiérarchique (bgcolor, valign, align, font, etc.) Sandrine Prom Tep, Mai 2003

page 8 Sandrine Prom Tep, M.Sc & Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. Balises et attributs des tableaux Un tableau peut en contenir un autre N.B.: La cellule peut contenir tout type d’éléments html y compris un autre tableau. Certaines mises en page présentent des assemblages complexes de tableaux en cascade. Sandrine Prom Tep, Mai 2003

page 9 Sandrine Prom Tep, M.Sc & Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. Balises et attributs des tableaux Exemples de sites avec tableaux complexes La toile du Québec : Sympatico-nouvelles: www2.sympatico.ca/nouvelleswww2.sympatico.ca/nouvelles Sandrine Prom Tep, Mai 2003

page 10 Sandrine Prom Tep, M.Sc & Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. Sympatico – nouvelles (section MONDE) NATIONAL MONDE SPORTS ÉCONOMIE SANTÉ TECHNOLOGIE INSOLITE SHOWBIZMAX MÉTÉO LOTERIE HOROSCOPE Sandrine Prom Tep, Mai 2003 Balises et attributs des tableaux

page 11 Sandrine Prom Tep, M.Sc & Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. Utilisation des volets ou cadres (frames) Avantages –Solution intéressante pour les éléments communs de conception –Affichage de plus d’une fenêtre à la fois –Peut aider à réduire une partie des tâches d’entretien de sites Inconvénients –Bris de la métaphore « un affichage – une page » –Impose une navigation fixe (sans aucune rétroaction) –Difficulté de pose de signets –Difficulté d’impression –Difficile d’indexer le contenu –Note: des solutions existent toutefois pour pallier ces difficultés. –Exemple de page bien faite avec frames: –Exemples de pages mal faites avec frames: :

page 12 Sandrine Prom Tep, M.Sc & Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. Utilisation des cadres Frameset: agencement de plusieurs fichiers html ou pages dans l’écran définition de la structure et des dimensions des cadres Frame: –définition du contenu des cadres (nom du cadre et source du fichier html), –« nom du cadre » vs « nom du fichier ou page HTML apparaissant dans ce cadre » –nom du cadre va de pair avec attribut Target dans un hyperlien Haut ). exemple de frames page identique pour les autres navigateurs Principaux attributs de la balise rows et cols exprimés en valeurs absolues (fixes) ou relatives (%) Découpage en bandes horizontales et verticales. Pour voir aussi attributs scrolling, noresize, frameborder…)

page 13 Sandrine Prom Tep, M.Sc & Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. Utilisation des cadres Applications types: 2 cadres (navigation et contenu) 3 cadres (identité, navigation et contenu) 3 cadres (navigation primaire et identité, navigation secondaire et contenu)

page 14 Sandrine Prom Tep, M.Sc & Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. Utilisation des cadres Applications types: 4 cadres (identité, navigation secondaire, contenu et navigation primaire) 3 cadres (pub, navigation et contenu)

page 15 Sandrine Prom Tep, M.Sc & Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. Cours 7 - exercice Exercice: réalisez le site suivant avec des tableaux Vous pouvez utiliser du “faux contenu” de type Lorem ipsum…voir mais en respectanthttp:// les noms de pages proposés dans la colonne de gauche et l’insertion d’une image et du gros titre du cours. Notes: Le site doit accommoder des résolutions allant de 640 * 480 à 1024 * 768.