MySQL et CSS- P13

MySQL et CSS- P13: Dans la première partie, lancez-vous dans la création de votre premier site web dynamique en PHP. Au travers d’exemples simples et concrets, apprenez à votre rythme à développer un site web complet, relié à une base de données MySQL
Nội dung trích xuất từ tài liệu:
MySQL et CSS- P13 Quelques sites Votre avis nous intéresse !… La balise acronym permet au navigateur d’afficher un drapeau qui déploiele 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) Double Poche CSS • 6015 Études de terrainno-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;}602 • Double Poche CSS Quelques sitesLe point remarquable dans la construction des styles de la page est que ladistribution 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 autresboîtes, qui sont en em, c’est-à-dire en une dimension relative.m Figure 5.24 : Réduction de taille 1Ainsi, la réduction de la résolution de l’écran ou de la taille de la fenêtredu navigateur ne défait pas cette savante architecture, qui est remarqua-blement élastique. L’agrandissement des caractères dans un navigateur nenuit pas, non plus, à l’harmonie ou à la lisibilité de l’ensemble. Double Poche CSS • 6035 Études de terrain b Figure 5.25 : Réduction de taille 2 !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’artisteMikaël Helleux est photographe. Son site http://etc.photo.free.fr/lui permet d’exposer ses œuvres. Ses pages sont suffisamment sobres pourmettre en valeur ses photos, qu’elles soient en couleur ou en noir et blanc.604 • Double Poche CSS Atelier d’artistem Figure 5.26 : ArrivezLa première page du site commence par une astuce qui permet detransformer la photo du positif au négatif lorsque la souris passe sur le lienen 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 ainséré une photo. L’image de fond est en négatif et l’image de surfaceest en positif, toutes les deux en noir et blanc. Pour que l’image de fondapparaisse, la photo de surface est affectée d’une transparence (voirFigure 5.27).Il s’agit d’une propriété CSS3, ce qui oblige l’auteur à adjoindre du codeJavaScript. Le JavaScript permet, au passage de la souris sur le lien, de Double Poche CSS • 6055 Études de terrainmodifier l’opacité de la photo de surface, qui devient transparente, et derévéler ainsi la photo de fond.m Figure 5.27 : EntrezLa propriété filter appelle des effets. Paradoxalement, ils sont acceptéspar Internet Explorer 6, mais pas par Firefox 1.5.Le filtre alpha utilisé ici a une transparence maximale, attribuée avecopacity=1.5.3 Un site fédérateurLe site www.fleurs-livraison.info propose au visiteur des offres deplusieurs sites de fleurs sur Internet et de prestataires de livraison, avec unlarge éventail de bouquets ou de budgets. Il fait office d’intermédiaireentre 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 etintelligente.606 • Double Poche CSS Un site fédérateurm Figure 5.28 : La page d’accueilL’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 ...