Tài liệu MySQL et CSS- P13 pptx

<p> <strong>Votre avis nous intéresse !</strong>… </p> </div> </div> <hr /> </div> La balise acronym permet au navigateur d’afficher un drapeau qui déploie le libellé complet de l’acronyme au passage de la souris. Encore une fois, la balise nommée hr arrive à point pour fermer ces boîtes et ouvrir la voie à la dernière boîte du cartouche, nommée avis. #opquast { background: #ebf4fd url("/images/opquast.png") no-repeat right top; } #w3c { background: #ebf4fd url("/images/w3c.png") no-repeat top right; } #wcag { background: #ebf4fd url("/images/wcag.png") no-repeat top right; } #engagement .title div { float: none; font-size: 0.9em; font-style: italic; color: #4477AA; } #engagement { float: right; width: 45%; background-image: none; } #engagement2 .title div { font-size: 0.9em; font-style: italic; color: #4477AA; } .left2 { width: 54%; float: left; } #engagement2 { width: 45%; float: right; background: transparent url("/images/charte.png") Quelques sites Double Poche CSS • 601 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. no-repeat top left; } engagement .zone { background-color: #ebf4fd; } #engagement2 .zone { margin: 0 !important; padding: 0 !important; } #engagement2 .zone .title { font-family: Tahoma; font-size: 18pt; text-align: right; color: #112233; height: 60px; margin: 0; padding: 0; padding-right: 90px; padding-top: 10px; } #engagement2 .zone .title div { padding-left: 1em; font-size: 12pt; } #engagement2 .zone p { margin: 0 !important; padding: 0; padding-top: 5px; height: 65px; } #engagement .zone .title { background: transparent url("/images/topleftblue.png") no-repeat top left; font-size: 1.3em; padding-right: 90px; text-align: right; color: #003366; padding-top: 0.6em; } #engagement .zone .title div { padding-left: 1em; padding-bottom: 0.6em; background: transparent url("/images/leftblue.png") no-repeat bottom left; } #engagement .zone p { background: #FFFFFF; padding-top: 0.6em !important; } 5 Études de terrain 602 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Le point remarquable dans la construction des styles de la page est que la distribution est cohérente entre les dimensions relatives aux images (et à tout ce qui s’y rattache), qui sont formulées en pixels, et celles des autres boîtes, qui sont en em, c’est-à-dire en une dimension relative. Ainsi, la réduction de la résolution de l’écran ou de la taille de la fenêtre du navigateur ne défait pas cette savante architecture, qui est remarqua- blement élastique. L’agrandissement des caractères dans un navigateur ne nuit pas, non plus, à l’harmonie ou à la lisibilité de l’ensemble. m Figure 5.24 : Réduction de taille 1 Quelques sites Double Poche CSS • 603 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. !important La valeur !important permet au développeur de rendre une propriété prioritaire sur la feuille de style par défaut du navigateur et sur celle de l’utilisateur. Cette propriété a priorité sur tout, excepté sur une propriété qui serait étiquetée !important dans une feuille de style de l’utilisateur. 5.2 Atelier d’artiste Mikaël Helleux est photographe. Son site http://etc.photo.free.fr/ lui permet d’exposer ses œuvres. Ses pages sont suffisamment sobres pour mettre en valeur ses photos, qu’elles soient en couleur ou en noir et blanc. b Figure 5.25 : Réduction de taille 2 5 Études de terrain 604 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. La première page du site commence par une astuce qui permet de transformer la photo du positif au négatif lorsque la souris passe sur le lien en légende. La photo représente la porte d’un phare. #index_photo { display:block; width:448px; height:297px; border:1px solid #808080; background:url(images/bazar/phare_nega.jpg) no-repeat 50% 0%; } #index_photo img { filter:alpha(opacity=1); -moz-opacity:0.1; } L’auteur a utilisé une boîte avec une image de fond dans laquelle il a inséré une photo. L’image de fond est en négatif et l’image de "surface" est en positif, toutes les deux en noir et blanc. Pour que l’image de fond apparaisse, la photo de surface est affectée d’une transparence (voir Figure 5.27). Il s’agit d’une propriété CSS3, ce qui oblige l’auteur à adjoindre du code JavaScript. Le JavaScript permet, au passage de la souris sur le lien, de m Figure 5.26 : Arrivez Atelier d’artiste Double Poche CSS • 605 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. modifier l’opacité de la photo de surface, qui devient transparente, et de révéler ainsi la photo de fond. La propriété filter appelle des effets. Paradoxalement, ils sont acceptés par Internet Explorer 6, mais pas par Firefox 1.5. Le filtre alpha utilisé ici a une transparence maximale, attribuée avec opacity=1. 5.3 Un site fédérateur Le site www.fleurs-livraison.info propose au visiteur des offres de plusieurs sites de fleurs sur Internet et de prestataires de livraison, avec un large éventail de bouquets ou de budgets. Il fait office d’intermédiaire entre les sites de livraison de fleurs et l’acheteur (voir Figure 5.28). La ligne graphique est claire et la feuille de style bien ordonnée et intelligente. m Figure 5.27 : Entrez 5 Études de terrain 606 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. L’auteur fait d’abord table rase des réglages des navigateurs par défaut. body { margin:0; padding:0; background:#fff; font:1em Arial, Helvetica, sans-serif } body { text-align:center } /** Centrage de la page dans ie **/ m Figure 5.28 : La page d’accueil Un site fédérateur Double Poche CSS • 607 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Les marges sont remises à 0 et le centrage des blocs qui, sur Internet Explorer, se fait avec text−align, est assuré. Ce centrage signifie que, un peu plus loin, il faudra rectifier et ajouter text−align: left, une fois que le centrage des blocs pour les navigateurs conformes aura été indiqué. #master { margin:auto; text-align:left; width:800px; } Le conteneur master épouse le contenu de la balise corps et permet de rectifier le bidouillage (vu plus haut à propos d’Internet Explorer). text−align: center a permis de centrer le conteneur pour Internet Explorer, margin: auto le fait pour les autres navigateurs, puis text−align: left remet le texte à gauche pour Internet Explorer et les autres navigateurs. Cette manière de faire complique le code et n’est pas conforme. Mais les développeurs doivent tenir compte de la non- conformité de certains navigateurs. <body> <div id="master"> La stratégie architecturale de la page est assez simple : ¶ un conteneur pour l’en-tête avec la bannière comme image de fond ; ¶ un conteneur pour la partie centrale ; − un conteneur pour la navigation ; − un conteneur pour le contenu propre à la page ; ¶ un conteneur pour le pied de page. Pour que les deux colonnes du contenu central, prises en sandwich entre l’en-tête et le pied, puissent se terminer proprement afin de faire place nette et de laisser de l’espace au pied de page, une balise br avec le nom clear comme classe est incluse à la fin de la deuxième colonne. /** Utiles **/ .clear {clear:both;} Tous les conteneurs de gauche sont tracés au cordeau car le motif de fond est un rectangle répété de haut en bas (repeat−y). Cette ligne a une 5 Études de terrain 608 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. bordure latérale qui lui donne son apparence de relief. Le conteneur est coiffé d’une balise h2 avec, comme image de fond, le haut arrondi du cartouche, tandis que le bas est rempli d’une classe avec l’image de fond du bas du cartouche. <!-- Menu Les boutiques --> <div id="menu2"> <h2>Les fleuristes</h2> <ul> <li><a href="livraison/fleurs_aquarelle.asp" title="Livraison fleurs - Aquarelle">Aquarelle</a></li> <li><a href="livraison/fleurs_au_nom_de_la_rose.asp" title="Livraison fleurs - Au nom de la rose">Au nom de la rose </a></li> <li><a href="livraison/fleurs_bebloom.asp" title="Livraison fleurs - Bebloom">Bebloom</a></li> <li><a href="livraison/fleurs_florajet.asp" title="Livraison fleurs - Florajet">Florajet</a></li> <li><a href="livraison/fleurs_interflora.asp" title="Livraison fleurs - Interflora">Interflora</a></li> <li><a href="livraison/fleurs_bouquet_nantais.asp" title="Livraison fleurs - Le bouquet Nantais"> Le bouquet Nantais</a></li> <li><a href="livraison/pres_de_chez_vous.asp" title="Livraison fleurs - Près de chez vous"> Près de chez vous</a></li> < /ul> <span class="menu2bottom"></span> </div> <!-- Fin colonne de gauche --> La feuille de style, elle, ajoute les images. b Figure 5.29 : Un conteneur de gauche Un site fédérateur Double Poche CSS • 609 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. /** Menus **/ #menu1 {width: 190px; background: url(images/bg_menu1.gif) repeat-y; margin-bottom:0px} #menu2 {width: 190px; background: url(images/bg_menu2.gif) repeat-y;} #zonemenu h2 {padding:11px 10px 12px 10px;} #menu1 h2 {background: url(images/bg_menu1-top.gif) no-repeat;} #menu2 h2 {background: url(images/bg_menu2-top.gif) no-repeat;} #zonemenu ul, #zonemenu li {margin:0; padding:0; list-style: none;} #menu1 ul {width:100%; background: #0099CC url(images/bg_menu1.gif) repeat-y;} #menu2 ul {width:100%; background: #0099CC url(images/bg_menu2.gif) repeat-y;} #zonemenu li {margin:0 4px 4px 4px;} #menu1 li {background:#65BBD2;} #menu2 li {background:#B6B6B6;} #zonemenu a {font-size:0.8em; color:#fff; display:block; padding:2px 4px 4px 34px; margin-top:-2px;} #menu1 a {background: url(images/menu1-puce.gif) no-repeat; font-weight: bold; color:#306376;} #menu2 a {background: url(images/menu2-puce.gif) no-repeat; color: #666666; font-weight: bold;} #menu1 a:hover {background: url(images/menu1-puce.gif) no-repeat; font-weight: bold; color:#ffffff;} #menu2 a:hover {background: url(images/menu2-puce.gif) no-repeat; color: #ffffff; font-weight: bold;} b Figure 5.30 : La coiffe du cartouche "Les bouquets" b Figure 5.31 : Le corps du cartouche "Les bouquets" b Figure 5.32 : Le pied du cartouche "Les bouquets" 5 Études de terrain 610 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... fleurs_recherche_express.asp" method="get"> Votre budget (€) Facultatif : (Nom, couleur, type ) . text−align: left remet le texte à gauche pour Internet Explorer et les autres navigateurs. Cette manière de faire complique le code et n’est pas conforme sites de livraison de fleurs et l’acheteur (voir Figure 5.28). La ligne graphique est claire et la feuille de style bien ordonnée et intelligente. m Figure