Académique Documents
Professionnel Documents
Culture Documents
Microsoft France
Microsoft
Automne 2006
Page 2 sur 14
Microsoft
1 Prsenter la navigation
Dans cet exercice, vous allez apprendre : Afficher une liste puce (<ul><li>) et la prsenter horizontalement, Afficher les barres de dfilement sur un lment (overflow), Utiliser le mode daffichage flottant (float) pour positionner des lments, Prsenter le contrle web serveur TreeView.
Objectif Lobjectif de cet exercice est de vous donner des exemples de prsentation de diffrents menus constituant une interface de navigation base de texte et dimages. Contexte fonctionnel La zone de navigation comporte trois parties distinctes que sont le rsum, la barre dicnes dactions et le menu des blogs. Lobjectif de cet atelier est de travailler laffichage de ces trois lments pour obtenir ceci :
Suivons la procdure dj utilise latelier 3 pour prsenter une grille de donnes. Droulement de lexercice : 1. Ouvrez la solution (ou votre projet issu de latelier 3) du projet web de latelier 3 dans Microsoft Visual Web Developer (VWD) 2005 Express Edition partir de ..Atelier 3\Solution. 2. Dfinissez les dimensions et les caractristiques de la grille : Ajouter lattribut CssClass avec la valeur TblResume au contrle GridView did gvResume:
Automne 2006
Page 3 sur 14
Microsoft
table.TblResume { font-family : Arial; font-size : 10pt; width : 230px; padding : 0px 0px 0px 0px; margin : 10px 10px 0px 10px; }
Notez que : - les proprits font-family et font-size qui dfinissent la police de caractres auraient pu tre omises dans la mesure o elles sont dj dfinies de manire identique dans le slecteur body parent. - La rgle portant sur la proprit padding aurait pu scrire de manire plus concise : padding : 0px. En effet, une seule valeur indique quatre marges identiques. Il existe galement une autre criture que nous navons encore jamais rencontre jusquici, avec trois valeurs au lieu de quatre. Elle se lit comme ceci : top right/left bottom. Enregistrez tout et excutez la page (CTRL F5) pour observer le rsultat : Marges de 10 px
3. Dfinissez un rectangle color autour de la ligne slectionne : Ajoutez llment <SelectedRowStyle> dans la dfinition de la grille. Ajoutez lattribut CssClass avec la valeur ResumeSelectionne celui-ci.
Ajoutez la suite dans la feuille de style les slecteurs multiples comme suit : td td td td a, a:link, a:visited, a:active,
table.TblResume tr.ResumeSelectionne table.TblResume tr.ResumeSelectionne table.TblResume tr.ResumeSelectionne table.TblResume tr.ResumeSelectionne { background-color : #C1D2EE; border : solid 1px #316AC5; padding : 1px 4px 1px 4px; }
Automne 2006
Page 4 sur 14
Microsoft
On retrouve ici lcriture du slecteur imbriqu. Cette criture signifie que toutes ces rgles sappliquent aux diffrents tats mentionns (link/visited/active) dun lien hypertexte (a) dans une colonne (td) de la ligne active (tr.ResumeSelectionne) de la grille (table.TblResume). Enregistrez tout et excutez la page (CTRL F5) pour observer le rsultat : Ligne slectionne
Comment faire apparatre ce mme rectangle color lorsque lutilisateur survole avec la souris une option du rsum, sans la slectionner pour autant ? Ajoutez tout simplement le slecteur table.TblResume td a :hover la dclaration prcdente dans la feuille de style : tr.ResumeSelectionne tr.ResumeSelectionne tr.ResumeSelectionne tr.ResumeSelectionne td a:hover td td td td a, a:link, a:visited, a:active,
Le contexte de ligne (tr.ResumeSelectionne) ntant pas prcis, les rgles sappliqueront chaque fois que lutilisateur survole un lien avec la souris quelque soit le type de ligne. Enregistrez tout et excutez la page (CTRL F5) pour observer le rsultat :
Ligne slectionne
Reste le fait que le rectangle sur fond bleu na jamais la mme longueur... Lidal serait davoir un rectangle uniforme prenant toute la largeur de la ligne et permettant lutilisateur de cliquer indiffremment sur le texte ou sur lespace blanc de la ligne pour dclencher laction voulue. Ajoutez tout simplement une dfinition du style global dun lien hypertexte dans la grille selon son tat :
table.TblResume td a, table.TblResume td a:link, table.TblResume td a:visited, table.TblResume td a:active { color : Black; text-decoration : none; Automne 2006 Crer ma premire feuille de style Page 5 sur 14
Microsoft display : block; width : 220px; padding : 2px 0px 2px 5px;
Rappelez-vous ce que nous avons vu latelier 3 : cest le mode daffichage en block qui dlimite le lien sur lensemble de la largeur de llment donn par la proprit width. Enregistrez tout et excutez la page (CTRL F5) pour observer le rsultat : Marge de 2px
Marge de 5px
220 px
Note :
Droulement de lexercice : 1. Retrouvez quelle est la reprsentation graphique gnre par ASP.NET pour le contrle TreeView : Excutez la page Default.aspx (CRTL F5). Faites un clic droit sur la page -> Afficher le code source de la page (Enregistrez le contenu sur votre bureau et r-ouvrez le fichier avec Visual Web Developer pour mieux grer laffichage et limbrication des balises entre elles). Retrouvez llment laide de son id tvBlogsFolders. Vous constatez que sa reprsentation est une imbrication de balises <table> et <div> html :
Automne 2006
Page 6 sur 14
Microsoft
Larborescence est reprsente ainsi : - une balise div globale did tvBlogsFolders encapsule lensemble du menu. - chaque nud parent est ensuite reprsent par une table suivi dune balise div encapsulant les nuds enfants. Cest le cas du nud racine (Blogs). Tous les nuds enfants (Communauts FR, Javascript et Microsoft) sont imbriqus dans une balise div did tvBlogsFoldersn0Nodes. - chacun des nuds enfants (Communauts FR, Javascript et Microsoft) sont eux-mmes reprsents par une table et encapsulent leur tour les nuds feuilles dans des balises div (respectivement tvBlogsFoldersn1Nodes, tvBlogsFoldersn1Nodes, tvBlogsFoldersn1Nodes).
1.2.1 Le menu
Commenons par fixer les dimensions et autres rgles globales du menu. Droulement de lexercice : 1. Ajoutez lattribut CssClass avec la valeur TreeView au contrle TreeView did tvBlogsFolders:
2. Ajoutez la suite dans la feuille de style le slecteur div.TreeView comme suit : div.TreeView { overflow : auto; height : 455px; width : 230px; margin : 0px 10px 0px 10px; padding : 0px; }
La proprit overflow contrle laffichage de la barre de dfilement pour le cas o le menu dpasserait la taille de la zone dfinie par height et width. Comme notre menu est charg partir dune base de donnes, cest en effet plus prudent. Diminuer la hauteur de la zone en jouant sur height pour observer laffichage de la barre de dfilement de manire automatique. 3. Enregistrez tout et excutez la page (CTRL F5) pour observer le rsultat :
10 px 10 px
455 px
Faites un clic droit sur la page -> afficher le code source de la page pour observer le rendu gnr par ASP.NET :
Automne 2006
Page 7 sur 14
Microsoft
Note :
Comme pour le contrle GridView, les proprits de style du TreeView, telles que NodeStyle, sont dfinies en tant que balise imbrique et non comme un attribut de la balise serveur <asp :TreeView>. Cela sexplique par le fait quelles sont elles-mmes constitues dune multitude de proprits dfinies via des proprits. A partir de cet lment NodeStyle, ASP.NET 2.0 gnre un style attach lensemble des lments html constituant chaque nud. Ajoutez la suite dans la feuille de style le slecteur div.TreeView .NoeudStandard comme suit :
Microsoft
Notez lcriture de classe sans prciser de slecteur (.NoeudStandard). La rgle sappliquera tout lment html rfrenant la classe NoeudStandard. Enregistrez tout et excutez la page (CTRL F5) pour observer le rsultat :
Faites un clic droit sur la page -> afficher le code source de la page pour observer le rendu gnr par ASP.NET :
Lien hypertexte
Colonne td
Vous constatez quASP.NET 2.0 attache le style lensemble des lments html constituant chaque nud. 2. Dfinissez le style du nud slectionn du TreeView pour quil apparaisse entour dun rectangle de couleur : Ajoutez llment <SelectedNodeStyle> dans la dfinition du contrle. Ajoutez lattribut CssClass avec la valeur NoeudSelectionne celui-ci.
feuille
de
style
le
slecteur
div.TreeView
div.TreeView .NoeudSelectionne { background-color : #C1D2EE; border : solid 1px #316AC5; padding : 1px 2px 1px 2px; }
Automne 2006
Page 9 sur 14
Microsoft
Prsenter la navigation Atelier 4 Enregistrez tout et excutez la page (CTRL F5) pour observer le rsultat :
Attention ! Seuls les nuds feuilles de larborescence sont concerns par ce style. Faites un clic droit sur la page -> afficher le code source de la page pour observer le rendu gnr par ASP.NET :
3. Faites une dernire petite retouche pour que le texte du menu soit en noir comme ailleurs : Comme le texte des nuds est en fait un lment de type lien hypertexte, cest au niveau du slecteur a quil faut agir : div.TreeView a, div.TreeView a:link, div.TreeView a:active, div.TreeView a:visited { color : Black; text-decoration : none; } Enregistrez tout et excutez la page (CTRL F5) pour observer le rsultat :
Automne 2006
Page 10 sur 14
Microsoft
Note :
Lobjectif est de travailler la prsentation pour obtenir un affichage en colonnes donc horizontal, sans puces. Droulement de lexercice : 1. Commenons par dfinir le style global de la liste : Ajoutez lattribut Class avec la valeur Action la balise ul dans la page :
ul.Action { list-style-type : none; display : block; height : 24px; border-bottom : solid 1px #D1D1D1; border-top : solid 1px #D1D1D1; margin : 10px 0px 0px 0px; padding : 0px 10px 0px 10px; }
Notez que : - La proprit list-style-type dfinit le style de la puce. Dans notre cas, la puce tant inutile, le style utilis est none. Automne 2006 Crer ma premire feuille de style Page 11 sur 14
Microsoft -
On dfinit une bordure autour de llment de faon ajouter un sparateur avec le rsum et le Treeview. Enregistrez tout et excutez la page (CTRL F5) pour observer le rsultat : Bordure de 1px
24 px
2. Tournez maintenant la liste pour quelle soit horizontale : Ajoutez la suite dans la feuille de style le slecteur ul.Action li comme suit : ul.Action li { display : block; height : 24px; float : left; }
Lastuce consiste programmer un mode daffichage flottant via la proprit float. Quest-ce que cela veut dire ? Il faut savoir que lorsque vous positionnez un lment de manire absolue dans le flux html dun document, il nest pas possible de dterminer o se trouve prcisment la fin de llment. Cest pour cette raison quil est particulirement difficile de positionner des lments la suite les uns des autres La solution consiste utiliser le mode daffichage flottant. Il indique que les lments sont placs la suite les uns des autres dans le flux html. Les valeurs left ou right prcisent si les lments sont cals par la gauche ou par la droite du containeur. Prenons lexemple dune image que vous voudriez placer la gauche dun texte. En utilisant le mode daffichage flottant vous obtenez : Limage est positionne de manire flottante partir de la gauche. Ce qui a pour effet que le texte prend lespace immdiatement disponible sur la droite et en dessous. Limage est positionne de manire flottante partir de la droite. Ce qui a pour effet que le texte prend lespace immdiatement disponible sur la gauche et en dessous.
Automne 2006
Page 12 sur 14
Microsoft
Essayez le mode flottant droite (juste pour le fun) et vous constaterez que les images sont les unes la suite des autres mais partir du bord droit du containeur div.Menu. 3. Retravaillez laffichage des images pour quelles soient plus espaces : Regardez de plus prt le contenu des lments de la liste. Vous constatez que ce sont des contrles serveur web de type LinkButton :
Si vous regardez maintenant le source de la page de rponse partir du navigateur, vous constatez que le rendu dun contrle LinkButton est un lien hypertexte. Cest donc imbriqu dans ce lien que ce trouve limage affichant licne dans la barre :
Ajoutez donc la suite dans la feuille de style les slecteurs suivant de faon formater les liens englobant les images :
ul.Action li a, ul.Action li a:link, ul.Action li a:visited, ul.Action li a:active { display : block; margin : 2px 2px 2px 2px; padding : 3px 3px 3px 3px; }
Automne 2006
Page 13 sur 14
Microsoft
Cette fois, cest presque parfait ! Lidal serait quand mme de mettre en vidence plus clairement le dplacement de lutilisateur avec sa souris 4. Dessiner un rectangle color autour de limage survole par la souris : Ajoutez la suite dans la feuille de style les slecteurs suivant : ul.Action li a:hover { background-color : #C1D2EE; border : solid 1px #316AC5; margin : 2px 2px 2px 2px; padding : 2px 2px 2px 2px; } Enregistrez tout et excutez la page (CTRL F5) pour observer le rsultat :
Position de la souris
Note :
Automne 2006
Page 14 sur 14