MySQL et CSS- P13

Chia sẻ: Thanh Cong | Ngày: | Loại File: PDF | Số trang:50

0
45
lượt xem
12
download

MySQL et CSS- P13

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

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

Chủ đề:
Lưu

Nội dung Text: MySQL et CSS- P13

  1. Quelques sites Votre avis nous intéresse !… 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") Double Poche CSS • 601
  2. 5 Études de terrain 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; } 602 • Double Poche CSS
  3. Quelques sites 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. m Figure 5.24 : Réduction de taille 1 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. Double Poche CSS • 603
  4. 5 É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’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. 604 • Double Poche CSS
  5. Atelier d’artiste m Figure 5.26 : Arrivez 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 Double Poche CSS • 605
  6. 5 Études de terrain modifier l’opacité de la photo de surface, qui devient transparente, et de révéler ainsi la photo de fond. m Figure 5.27 : Entrez 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. 606 • Double Poche CSS
  7. Un site fédérateur m Figure 5.28 : La page d’accueil 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 **/ Double Poche CSS • 607
  8. 5 Études de terrain 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. 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 608 • Double Poche CSS
  9. Un site fédérateur 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. b Figure 5.29 : Un conteneur de gauche Les fleuristes Aquarelle Au nom de la rose Bebloom Florajet Interflora Le bouquet Nantais Près de chez vous La feuille de style, elle, ajoute les images. Double Poche CSS • 609
  10. 5 Études de terrain 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" /** 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;} 610 • Double Poche CSS
  11. Un site fédérateur .menu1bottom, .menu2bottom {height:15px; width:190px; margin:0; display:block} .menu1bottom {background: url(images/bg_menu1-bas.gif) no-repeat bottom;} .menu2bottom {background: url(images/bg_menu2-bas.gif) no-repeat bottom;} Les menus déclinent comme puce un b Figure 5.33 : carré encadrant une flèche, qui est une La flèche image de fond, et comme couleur de fond la même que celle du cartouche. La balise li a comme propriété display: block. Ainsi, tout "survol" du conteneur li provoque le changement de couleur du lien. Le padding agit sur le retrait de la puce. b Figure 5.34 : Sur un "survol"… Le formulaire de recherche est remarquable par son code XHTML et sa feuille de style. /** Formulaire de recherche **/ #frm-recherche { width: 190px; background: url(images/bg_recherche.gif) repeat-y; margin-bottom:0px; } #frm-recherche h2 { background: url(images/bg_recherche-top.gif) no-repeat; font-size:1em; font-style:italic; padding:11px 10px 12px 10px; } #frm-recherche form { margin:0; Double Poche CSS • 611
  12. 5 Études de terrain padding:0; } #frm-recherche p { margin: 0 12px } #frm-recherche label { font-size:0.9em; } #frm-recherche input, #frm-recherche select { margin:4px 0; width:150px; background-color:#EEEDC4; border:0; border:1px solid #948E1C; } #frm-recherche .button { border:1px solid #eaeaea; margin-top:6px; } .frmrecherche-bottom { background: url(images/bg_recherche-bas.gif) no-repeat bottom; height:15px; width:190px; margin:0; display:block } Le cartouche du formulaire de recherche est réalisé de la même façon que les deux autres, avec le haut et le bas qui terminent la bordure avec des angles ronds. b Figure 5.35 : Le cartouche de recherche À l’intérieur du formulaire, les champs de texte ou du menu sont d’une couleur légèrement plus claire que le fond background−color:#EEEDC4 et que le bouton de soumission du formulaire, qui contient la propriété input. 612 • Double Poche CSS
  13. Un site fédérateur Recherche express Votre budget (€) Facultatif : (Nom, couleur, type… ) Boutique Toutes Aquarelle La colonne de droite affiche le contenu de la page. Elle est réalisée de la même manière que la colonne précédente avec trois conteneurs. Le troisième conteneur intègre une image à gauche, avec le texte aligné à droite et un padding de 13 pixels ajouté à la largeur de l’image. Double Poche CSS • 613
  14. 5 Études de terrain m Figure 5.36 : La colonne "de droite" .annoncespl p{padding-left:146px} Le XHTML s’égrène selon le même modèle que précédemment. Offrir des…En plus de… Vous pouvez…Nous vous souhaitons d’avance… 614 • Double Poche CSS
  15. Un site fédérateur Le pied de page se divise en deux parties horizontales. La première est dans un cartouche beige et la deuxième est un texte en petits caractères sur le fond blanc. b Figure 5.37 : le pied /** Pied **/ .piedtop { width:800px; height:8px; display:block; background: url(images/bg_pied-top.gif) no-repeat bottom; margin-top:6px } #pied p.infos { font-size:0.75em; color:#fff; text-align:center; background: #00CC66 url(images/bg_pied.gif) repeat-y; } #pied .infos a {color:#fff;} #pied p.liensutiles { color:#c0c0c0; width:800px; text-align:center; margin:0; padding-top:12px; font-size:0.75em; background: url(images/bg_pied-bas.gif) no-repeat left top; font-size: 9px; } #pied .liensutiles a { color:#c0c0c0; text-decoration:none; font-size: 9px; } L’image de fond est divisée en trois et distribuée dans les trois conteneurs du pied de page : ¶ le haut du cartouche ; ¶ le corps du cartouche ; ¶ le bas du cartouche placé en haut du dernier conteneur. Double Poche CSS • 615
  16. 5 Études de terrain Fleurs-livraison est un joli site au service d’une bonne idée, à savoir regrouper toutes les offres de fleurs sur Internet, livraison comprise. 5.4 Construction du site Auparavant, la seule manière de construire une page était de créer un tableau invisible avec des cellules dans lesquelles se positionnaient des images, des titres, des textes, des liens de navigation, le pied de page, le logo, la bannière de publicité. Le tableau est, en HTML, la seule balise permettant d’ordonner et de placer les éléments. Le HTML est conçu, au départ, pour afficher des textes avec des images qui sont prises comme des éléments de texte et qui s’insèrent là où le code est placé. La seule possibilité est d’aligner le texte sur l’image avec la propriété align. Celle-ci place le texte au bas, au milieu ou en haut de l’image, en prenant respectivement les valeurs bottom, middle et top. La conception des calques (layers) révolutionne tout cela, avec Netscape le navigateur le plus utilisé à l’époque. Elle n’a jamais été validée par le consortium W3C. Viennent ensuite les balises DIV promues par Microsoft sur son navigateur Internet Explorer. Ces containeurs ont été validés. Sans CSS, ces boîtes sont disposées verticalement, les unes sur les autres, dans ce qu’on appelle le flux. Le flux est la lecture ligne à ligne opérée par un navigateur quand il décode du HTML. Les premières données affichées sont écrites au début du fichier source. Les boîtes ont ce privilège de suivre le flux courant ou d’en sortir (voir Figure 5.38). Le site classique est composé de trois colonnes, d’un en-tête et d’un pied, c’est-à-dire de cinq boîtes. Il s’agit ici de disposer ces boîtes dans un ensemble harmonieux et régulier. Ces cinq boîtes sont matérialisées par les conteneurs DIV. 616 • Double Poche CSS
  17. Construction du site m Figure 5.38 : Site à cinq boîtes Réflexions Avant de créer à proprement parler un site, il faut commencer par le dessiner, non pas sur support informatique, mais sur papier avec des crayons de couleur et affiner peu à peu le dessin. Ensuite, il est plus facile, une fois le dessin finalisé, de le reporter sur un logiciel comme Photoshop, ou autre Fireworks. L’un des défauts des sites web est qu’ils sont tracés au cordeau, comme des jardins à la française. Pour certains d’entre eux, ce n’est pas un défaut ; mais les angles droits, les lignes parfaites et les parties clairement délimitées ne conviennent pas systématiquement. Les webmasters s’ingénient à trouver des astuces, avec des images GIF à fond transparent ou des habillages de cartouche qui masquent le plan architectural de la page et cassent le bel ordonnancement. L’outil est au Double Poche CSS • 617
  18. 5 Études de terrain service de la conception de la page. Disposer d’un bon outil, c’est bien… encore faut-il savoir ce que l’on peut en faire. m Figure 5.39 : Un site avec découpe Une fois le dessin réalisé, le webmaster le découpe en code et en images. C’est là qu’il faut choisir le positionnement des colonnes et les imbrica- tions de conteneurs. Types de boîtes Les CSS proposent deux types de boîtes : ¶ les boîtes en ligne (inline) ; ¶ les boîtes bloc. Tab. 5.1 : Différences entes les boîtes bloc et les boîtes en ligne Caractéristiques des boîtes bloc Caractéristiques des boîtes en ligne Elles sont disposées naturellement les Elles sont disposées naturellement les unes au-dessus des autres. unes après les autres. 618 • Double Poche CSS
  19. Construction du site Tab. 5.1 : Différences entes les boîtes bloc et les boîtes en ligne Caractéristiques des boîtes bloc Caractéristiques des boîtes en ligne Elles occupent toute la largeur du Elles entourent horizontalement leur conteneur qui les contient. contenu. Elles possèdent quatre marges externes Elles possèdent deux marges externes (haut, bas, gauche, droite). (gauche, droite). Elles sont insécables. Elles sont sécables (pour aller à la ligne). Elles peuvent seulement contenir d’autres Elles peuvent contenir tout type de boîte. boîtes en ligne. Il faut préciser la hauteur pour mettre de Elles permettent de définir la taille des l’air autour du contenu. marges intérieures (padding). Elles prennent en charge span, em, a, Elles prennent en charge div, body, p, img, br, i, strong. table, span, a, blockquote, h1−h6, ol, ul, li, hr, img, form. La frontière entre "en ligne" et "bloc" est poreuse Avec la propriété display: block ou display: inline, il est possible de forcer le type de la boîte ou de l’affirmer pour certains navigateurs peu respectueux des normes W3C. Position des boîtes La position par défaut, position: static;, est dans le flux normal. Positionner une boîte signifie la sortir du flux naturel du HTML et la placer arbitrairement dans la page. La position peut être calculée par rapport à la page web (absolute), par rapport aux autres boîtes (rela- tive) ou par rapport à l’écran (fixed). absolute Quand une boîte a une position absolue, sa place est définie par les propriétés top, left, right, bottom. Elles indiquent l’écart entre la boîte et le bord de la page web ou de l’élément qui la contient. Double Poche CSS • 619
  20. 5 Études de terrain m Figure 5.40 : Position absolue div#navigauche { position: absolute; left: 10px; top: 120px; } Cette boîte sera positionnée à 120 pixels du bord supérieur du site et à 10 pixels du bord gauche, quelle que soit sa place dans le code HTML et quelle que soit la place des boîtes qui la contiennent. Voici le conteneur extérieur Voici le conteneur intérieur Le code précédent affiche une boîte contenue elle-même dans une autre boîte. Le code CSS va bousculer ce joli ordonnancement en sortant la boîte noyau de sa place naturelle dans la boîte fruit. 620 • Double Poche CSS
Đồng bộ tài khoản