FEUILLE DE STYLE

< Atelier 4 /> Prsenter la navigation

Microsoft France

Crer ma premire feuille de style

Microsoft

Prsenter la navigation Atelier 4

Sommaire des ateliers

INTRODUCTION ATELIER 1 : COMPRENDRE LES FONDAMENTAUX ATELIER 2 : POSITIONNER ET PRESENTER DES CONTENUS ATELIER 3 : PRESENTER UNE GRILLE DE DONNEES ATELIER 4 1 PRSENTER LA NAVIGATION........................................................................................................................................3 ATELIER 5 : PRESENTER UN FORMULAIRE PERSONNALISER LA ZONE DE DTAIL DUN POST LE TITRE DU POST CORPS DU POST PERSONNALISER LES PANNEAUX DACTIONS DE LA BARRE DICONES LE PANNEAU LES BOUTONS LES LIBELLES LES CONTRLES DE SAISIE LA BARRE DE TITRE

Automne 2006

Crer ma premire feuille de style

Page 2 sur 14

Microsoft

Prsenter la navigation Atelier 4

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 :

1.1 Personnaliser le rsum de la zone de navigation (GridView)

Les liens du rsum sont gnrs via un contrle serveur web de type GridView did gvResume.

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

Crer ma premire feuille de style

Page 3 sur 14

Microsoft

Prsenter la navigation Atelier 4

Ajoutez la suite dans la feuille de style le slecteur table.TblResume comme suit :

table.TblResume { font-family : Arial; font-size : 10pt; width : 230px; padding : 0px 0px 0px 0px; margin : 10px 10px 0px 10px; }

/* top right bottom left */ /* top right bottom left */

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; }

/* style width color */ /* top right bottom left */

Automne 2006

Crer ma premire feuille de style

Page 4 sur 14

Microsoft

Prsenter la navigation Atelier 4

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,

table.TblResume table.TblResume table.TblResume table.TblResume table.TblResume { }

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

Lien survol avec la souris

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;

Prsenter la navigation Atelier 4

/* top right bottom left */

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 :

1.2 Personnaliser larborescence des blogs (TreeView)

La hirarchie des blogs est construite sur la base dun contrle serveur web de type TreeView did tvBlogsFolders.

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

Crer ma premire feuille de style

Page 6 sur 14

Microsoft

Prsenter la navigation Atelier 4

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; }

/* top right bottom left */ /* top/right/bottom/left */

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

Crer ma premire feuille de style

Page 7 sur 14

Microsoft

Prsenter la navigation Atelier 4

Note :

1.2.2 Les nuds

Fixons maintenant les caractristiques des nuds. Il faut considrer plusieurs types de nud : - le nud standard, - le nud slectionn en cours. Appliquer un style un nud revient formater les lments le composant. Pour chaque nud blog, ASP.NET gnre notamment un lien hypertexte sur lequel est branch laction daffichage des nuds enfants ou de la liste des posts associs. Droulement de lexercice : 1. Appliquez un style au nud type du TreeView. Lobjectif est dajuster lespacement entre le texte du nud et la bordure de llment : Ajoutez llment <NodeStyle> dans la dfinition du contrle. Ajoutez lattribut CssClass avec la valeur NoeudStandard celui-ci.

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 :

div.TreeView .NoeudStandard { padding : 1px 2px 1px 2px; } Automne 2006

/* top right bottom left */ Page 8 sur 14

Crer ma premire feuille de style

Microsoft

Prsenter la navigation Atelier 4

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 :

2 px pour la marge intrieure gauche

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.

Ajoutez la suite dans la .NoeudSelectionne comme suit :

feuille

de

style

le

slecteur

div.TreeView

div.TreeView .NoeudSelectionne { background-color : #C1D2EE; border : solid 1px #316AC5; padding : 1px 2px 1px 2px; }

Automne 2006

Crer ma premire feuille de style

Page 9 sur 14

Microsoft

Prsenter la navigation Atelier 4 Enregistrez tout et excutez la page (CTRL F5) pour observer le rsultat :

Nud slectionn en cours

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 :

Seul le nud en cours est concern

Le style se combine au style prcdent

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 :

La police de caractres est maintenant en noir et le soulignement des liens a disparu.

Automne 2006

Crer ma premire feuille de style

Page 10 sur 14

Microsoft

Prsenter la navigation Atelier 4

Note :

1.3 Personnaliser la barre dicne dactions (liste puces)

La barre dactions est une liste non ordonne de type <ul><li></li></ul>. Par dfaut, les lments <li> dune liste saffichent par lignes donc verticalement, avec une puce de type rond noir.

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 :

Ajoutez la suite dans la feuille de style le slecteur ul.Action comme suit :

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 -

Prsenter la navigation Atelier 4

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

Marge extrieure haute de 10 pixels

Marge intrieure gauche de 10 pixels

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.

Enregistrez tout et excutez la page (CTRL F5) pour observer le rsultat :

Automne 2006

Crer ma premire feuille de style

Page 12 sur 14

Microsoft

Prsenter la navigation Atelier 4

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; }

/* gre lespacement extrieur au lien */ /* gre lespacement intrieur au lien */

Enregistrez tout et excutez la page (CTRL F5) pour observer le rsultat :

Automne 2006

Crer ma premire feuille de style

Page 13 sur 14

Microsoft

Prsenter la navigation Atelier 4

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

Crer ma premire feuille de style

Page 14 sur 14