MySQL et CSS- P12

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

0
33
lượt xem
5
download

MySQL et CSS- P12

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

MySQL et CSS- P12: 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- P12

  1. Relooker des formulaires La pseudo-classe :lang La pseudo-classe :lang permet de couvrir les besoins liés à la typogra- phie et à la syntaxe de chaque langue. :lang(fr-CH) > Q { quotes: ’« ’ ’ »’ ’’} /*4 arguments*/ Les deux premières données concernent les guillemets et les deux dernières désignent les guillemets à l’intérieur d’autres guillemets. Le code se rpésente avec quatre arguments ou les deux premiers seulement.. En français de Suisse on utilise un double chevron – et un simple chevron à l’intérieur des guillemets. Pour connaître les caractères de guillemets, allez sur www.mus.ulaval.ca/roberge/gdrm/08-codes.htm. m Figure 4.29 : Langues et caractères Double Poche CSS • 551
  2. 4 La réalisation du site m Figure 4.30 : Liens et langues Les pseudo-éléments Le pseudo-élément :first-line Le pseudo-élément :first−line s’applique à la première ligne affichée dans un paragraphe. Cette ligne est celle qui s’affiche vraiment dans le navigateur et sera donc différente selon le navigateur, la largeur affichée, la taille de la police, l’interlettrage, etc. Ce pseudo-élément ne correspond à aucune balise HTML. Pour des articles où l’auteur prévoit un chapeau sans créer une nouvelle boîte spécifique, il est possible d’utiliser ce pseudo-élément pour créer une première ligne en gras. La longueur de la première ligne dépend de l’affichage du navigateur, de la taille de la police, etc. m Figure 4.31 : Première ligne en gras Pour la désigner précisément, il suffit de mettre un passage à la ligne juste à la fin du chapeau avec un et d’insérer dans la feuille de style : 552 • Double Poche CSS
  3. Relooker des formulaires p:first-line { text-weight: bold } Dans ce pseudo-élément, il est possible de mettre toutes les propriétés de font, d’arrière-plan et toutes les propriétés concernant l’espacement de la ligne, l’interlettrage, etc. Ce procédé risque d’être envahissant, vu qu’il s’applique à tous les paragraphes. Le pseudo-élément :first-letter Cet élément spécifie les caractéristiques des lettrines. Il s’agit des premières lettres d’un paragraphe d’un corps supérieur à ce dernier et qui se tiennent sur deux, parfois trois lignes. En typographie française, les lettres suivantes sont en petites capitales. Si la lettrine commence une citation, les guillemets ouvrants viennent dans le corps du paragraphe et non dans celui de la lettrine. L’utilité de la lettrine dans une page est l’ornementation ; elle permet en outre de désigner le commencement du texte. Sur le Web, la création d’une lettrine est un casse-tête. p:first-letter { font-weight: bold; text-transform: uppercase; font-size: 200%} La première lettre des paragraphes est plus grande, plus grosse et en capitales, mais elle ne descend pas sur deux lignes, comme le fait une lettrine. La solution est donc de mettre la lettre dans une boîte flottante. .lettrine { float: left; font-weight: bold; text-transform: uppercase; font-size: 210%; margin-right: 10px; } Il reste à mettre les lettres restantes du mot en petites capitales. font-variant: small-caps; Double Poche CSS • 553
  4. 4 La réalisation du site Le résultat est peu harmonieux et approximatif pour beaucoup d’opéra- tions. Si vous voulez absolument mettre des lettrines, insérez plutôt des images dans une boîte flottante. m Figure 4.32 : Lettrine Les pseudo-éléments :before et :after Les pseudo-éléments :before et :after servent à insérer un objet avant ou après le contenu d’un élément. L’objet peut être un mot, une image, etc. mais pas du code HTML. Voici des pseudo-éléments très pratiques pour créer une FAQ (foire aux questions). Ces pages sont faites de questions-réponses et ici la question est surlignée en jaune avec des caractères bleus. Le problème est que Internet Explorer n’accepte pas la génération de contenu avec la propriété content. p.QR { background-color: FFEDA6; color: 003D6C; font-family: Arial; } p.QR::before { content: "Question: "; font-family: Arial; font-size: 1.1em; } p.QR::after { content: " ?"; font-family: Arial; font-size: 1.1em; } 554 • Double Poche CSS
  5. Relooker des formulaires Vu le problème avec Internet Explorer, il est peut-être plus judicieux de placer le point d’interrogation avec son espace à la main. m Figure 4.33 : FAQ www.jardinauxpapillons.com Les filtres Plusieurs filtres sont à la disposition du développeur pour créer des effets sur des images ou des textes. Ils sont reconnus uniquement par Internet Explorer 4 et les versions supérieures. Ils ne peuvent donc être utilisés que s’ils ne sont pas essentiels. Ils peuvent sembler des gadgets mais certains sont intéressants pour donner un style aux images d’un site. La propriété ne fonctionne que dans une balise en ligne. Sinon, le conseil est de créer ces effets directement sur l’image avec un logiciel graphique. Double Poche CSS • 555
  6. 4 La réalisation du site alpha Le filtre alpha crée dans l’image une transparence. Le paramètre opacity, qui contrôle l’opacité, est obligatoire : 0 correspond à la transparence maximale, et 100 à l’opacité maximale. style permet de choisir les types de dégradés : 0 pour uniforme, 1 pour linéaire et 2 pour radial. Avec style=1, pour intégrer un dégradé, il faut nécessairement indiquer une valeur de départ (startx et starty) et de fin (finishx et finishy) en pixels ou en pourcentage. m Figure 4.34 : alpha shadow Ce filtre comporte deux paramètres : la couleur en code hexadécimal et la direction en degrés. L’ombre, contrairement à l’ombre portée de drops- hadow, est diffuse. filter: shadow (color=#CACACA, direction=45); dropshadow Ce filtre crée une ombre portée, comme si l’image ou le texte se tenaient au-dessus d’une surface. Cet effet donne du relief. 556 • Double Poche CSS
  7. Relooker des formulaires Il accepte quatre paramètres : ¶ la couleur de l’ombre portée ; ¶ le décalage horizontal et le décalage vertical (offX et offY) ; ¶ la position, dont la valeur est un booléen : 1 pour une ombre à l’extérieur, 0 pour une ombre à l’intérieur de l’élément. filter: dropshadow (color=##83838C, offX=3, offY=3, positive=1); glow Ce filtre ajoute un halo de couleur autour de l’image ou du texte. Il accepte deux paramètres : la couleur et la densité. filter: glow (color= #D7B5CF, strength=5); chroma Ce filtre permet de définir, dans une image GIF, une couleur comme transparente. Selon le type de média Avec CSS2 apparaît la prise en compte du format du média visé. Tab. 4.6 : Les différents types de médias Type Application media="all" Tous les types de médias. media="aural" Synthèse vocale assistée par ordinateur. media="braille" Ce type de média est paramétré pour les aveugles. Le texte est traduit sur une surface modifiée en braille, ce qui permet aux aveugles de lire le texte. media="embossed" Le texte est pressé en relief, sur une imprimante braille, sous forme de structures de surface pouvant être reconnues au toucher sur du papier ou sur un matériau comparable, à destination des aveugles. Double Poche CSS • 557
  8. 4 La réalisation du site Tab. 4.6 : Les différents types de médias Type Application media="handheld" Ce format s’applique à des assistants numériques, des téléphones portables et d’autres agendas électroniques. Le format est prévu pour des petits écrans. media="print" Ce format s’applique à l’imprimante quand l’utilisateur désire imprimer. media="projection" Ce format concerne les rétroprojecteurs et d’autres projecteurs vidéo. media="screen" C’est le format par défaut. Il s’applique aux écrans d’ordinateur. media="tty" Ce média concerne les sorties texte avec une largeur invariable, comme les télex. Il est aussi intéressant pour les navigateurs texte de type Lynx. media="tv" Ce format est celui de l’audiovisuel, comme la télévision, où le son et l’image se combinent. La qualité visuelle n’a pas besoin d’être parfaite. Pour les navigateurs qui n’implémentent pas CSS2, on emploie généra- lement la règle @import, qui permet d’importer les feuilles de style. Elle n’est pas reconnue par les anciens navigateurs. Titre du fichier 558 • Double Poche CSS
  9. Relooker des formulaires La règle @import La règle @import s’insère dans une feuille de style, qu’elle soit interne ou externe. Pour imprimer, il est préférable de gommer les couleurs et d’avoir le meilleur contraste possible entre le texte et le fond de page. Les menus ne sont pas utiles. En revanche, les liens de référence qui éclairent le propos par des pages annexes, doivent être explicites et complets. La feuille de style print doit tenir compte de tout cela. Le code qui suit est tiré du site www.ardaee.com et permet de ne pas afficher les images, d’avoir des caractères noirs sur un fond blanc, de décliner les liens en entier et en clair, de ne pas imprimer les menus de navigation, d’afficher une marge sur des navigateurs compatibles CSS2. Internet Explorer imprimera bien la page mais sans les liens en clair. De ce fait, il est utile d’insérer le nom de domaine dans le pied de page. body { color: #000; background: #fff none; font-family: arial, sans-serif; font-size: 10pt; line-height: 12pt; } #navidroite, #navigauche { display: none; } img, #titre img { display: none; } #corps { width: auto; margin: 0 5%; padding: 0; border: 0; float: none !important; color: black; background: transparent none; } .pied { margin: 3% 10%; Double Poche CSS • 559
  10. 4 La réalisation du site } a { color: gray; background: transparent; font-weight: bold; text-decoration: none; } a:link:after { content: "(" attr(href) ")"; font-size: 90%; } a[href]:after { content: " (http://www.ardaee.com/" attr(href) ") "; } a[href^="http://"]:after { content: " (" attr(href) ") "; } a[href^="#"]:after { content: ""; } Les liens sont mis en gris et les liens relatifs sont transformés en absolus. Comme il n’existe pas de recherche d’un "non-motif", c’est-à-dire de mots qui ne contiennent pas le motif, l’astuce consiste à ajouter le lien directeur du site à tous les liens puis de l’enlever sur les liens externes. Le dernier sélecteur enlève les ancres qui envoient vers un point de la page elle-même. b Figure 4.35 : Prête à imprimer 560 • Double Poche CSS
  11. Relooker des formulaires Bidouillages et défaillances autour d’Internet Explorer Cependant, la venue d’Internet Explorer 7, qui ajoute encore de la complexité sans apporter de la conformité, va compliquer davantage le développement des sites. Il faut espérer que ce navigateur perde des parts de marché au profit de Firefox ou d’autres navigateurs compatibles pour simplifier le développement des sites. Le problème des bidouillages de la feuille de style est que celle-ci n’est plus conforme et peut amener des bogues avec les navigateurs du futur. Mac ou PC Les versions Mac et PC d’Internet Explorer ont été créées par deux équipes indépendantes, qui ont donc produit deux logiciels différents. Le sélecteur * html (révélé à Internet Explorer PC seulement) Ce sélecteur représente la balise html comme descendant d’un élément quelconque, ce qui est une sélection impossible car la balise html est l’élément racine des pages HTML. Un navigateur normal ignore ce sélecteur car il ne correspond à rien. Internet Explorer lui en tient compte. div#corps { position: absolute; max-width: 600px; margin: 0 250px; padding: 0 20px 20px 20px; background-color: #E2EA8A; } * html div#corps { width: 600px; } Double Poche CSS • 561
  12. 4 La réalisation du site Le problème avec Internet Explorer est que, si la propriété width n’est pas présente, la largeur n’a plus de limites. Ici le sélecteur * html div#corps n’est reconnu que par lui. Le sélecteur enfant, adjacent ou le sélecteur d’attribut (caché à Internet Explorer PC seulement) Pour cacher certaines règles à Internet Explorer PC, il suffit d’utiliser le sélecteur enfant qu’il ne reconnaît pas. html>body div#corps { max-width: 600px; } Ici, il ne reconnaît pas la propriété max−width, mais elle lui est cachée par la présence du caractère >, qui désigne un sélecteur enfant. td+td+td:after { content:url(acheter.png); } Ici, les acheteurs potentiels qui utilisent Internet Explorer ne pourront rien acheter car ils ne verront pas l’image qui les renseigne. En effet, le sélecteur est adjacent et le pseudo-élément :after n’est pas reconnu, ni content d’ailleurs. Les sélecteurs d’attribut ne sont pas reconnus par Internet Explorer : a[href|="http"] { color:#261; } Le commentaire (caché à Internet Explorer Mac seulement) Internet Explorer Mac voit l’antislash comme un signe d’échappement, y compris dans un commentaire. Par conséquent, dans ce qui suit, il ne voit pas la fin du commentaire de la première ligne et il prend en compte la deuxième ligne de code. 562 • Double Poche CSS
  13. Relooker des formulaires .nav {width:200px} /* IE MAC ne voit pas la fin de commentaire à cause de l’antislash \*/ .nav {width:150px} /* IE MAC voit un commentaire sur 3 lignes, cette ligne incluse */ nav a une largeur de 150 px, sauf pour Internet Explorer Mac qui affiche une largeur de 200 px. Le commentaire (révélé à Internet Explorer Mac seulement) Internet Explorer pour Mac ne voit pas l’astérisque masqué par un antislash et qui ferme le commentaire pour tous les autres navigateurs. .nav {width:200px} /*IE Mac ne voit pas l’astérisque qui suit l’antislash \*//*/ .nav {width:250px} /**/ nav a une largeur de 200 px, sauf pour Internet Explorer Mac qui voit une largeur de 250 px. Le blanc souligné (révélé à Internet Explorer PC seulement) Internet Explorer PC ignore le blanc souligné apposé devant une pro- priété. Les autres navigateurs ne le prennent pas en compte et le voient comme une erreur de code. .nav {_width:250px;width:200px} nav a une largeur de 200 px, sauf pour Internet Explorer PC qui voit une largeur de 250 px. min-height et min-width (cachés à Internet Explorer PC et Mac) min−height et min−width, max−height et max−width sont des propriétés indispensables pour des conteneurs dont on ne connaît pas la taille du contenu et surtout dans un contexte où l’architecture de la page est Double Poche CSS • 563
  14. 4 La réalisation du site extensible selon la définition de l’écran de l’internaute. Or Internet Explorer les ignore, ce qui pose des problèmes pour la mise en page avec des colonnes sous forme de boîtes. Une solution consiste à utiliser une image de fond pour avoir une hauteur ou une largeur minimale. Il est aussi intéressant de mettre un width ou un height dans un sélecteur qui est vu uniquement par Internet Explorer. Reprenons le premier exemple de cette section. div#corps { position: absolute; max-width: 600px; margin: 0 250px; padding: 0 20px 20px 20px; background-color: #E2EA8A; } * html div#corps { width: 600px; } Pour remédier au fait que Internet Explorer ignore la propriété min−height, la solution consiste en un ensemble de deux conteneurs, l’un dans l’autre. Le conteneur extérieur a un padding équivalent à cette hauteur minimale requise et le conteneur intérieur est doté d’une marge négative équivalente. #out-min-height { padding-top:200px; /* voici le min-height (200px) */ min-height: 1px; /* pour Opéra */ } #in-min-height { margin-top: -200px /* pour compenser le padding-top */ } Votre contenu ici, long ou court à votre guise. 564 • Double Poche CSS
  15. Relooker des formulaires margin et padding Les marges internes et externes sont gérées différemment par les naviga- teurs. Chacun fait sa "cuisine" pour définir les marges des éléments. C’est pourquoi, dès l’entrée, il est préférable de remettre tout à 0. body { margin: 0; padding: 0; } Cette portion de code aide à positionner des éléments dans une page de manière plus précise en mettant tous les navigateurs sur le même réglage. Sinon les marges par défaut des différents navigateurs vont fausser l’affichage. Internet Explorer 7 Internet Explorer 7 est un projet dirigé par Dean Edwards, qui consiste en une bibliothèque JavaScript compensant les manques d’Internet Explorer. Ces caractéristiques sont les suivantes : ¶ Il répond aux sélecteurs CSS suivants : − parent > enfant ; − frère + adjacent ; − frère ~ adjacent ; − [attr], [attr="valeur"], [attr~="valeur"]… − Classes multiples (réparent certains bogues). − :hover, :active, :focus (pour tous les éléments). − :before, :after, content:. − :lang(). ¶ Il fonctionne avec des documents HTML ou XML indifféremment. ¶ Il applique les feuilles de style importées. ¶ Il préserve la cascade dans la feuille de style. ¶ Il ne modifie pas la structure du document. ¶ Il ne fait pas appel sans cesse à la structure DOM du document. ¶ Il utilise du pur CSS pour suppléer aux règles CSS. Double Poche CSS • 565
  16. 4 La réalisation du site ¶ Il accepte le modèle de boîte du W3C. ¶ Il accepte la position fixed (exempte de scintillement). ¶ Il accepte overflow:visible. ¶ Il accepte min/max−width/height. ¶ Il accepte la transparence alpha des PNG. ¶ Script poids léger (22 K). ¶ Il est entièrement modulaire. ¶ Il fonctionne pour Microsoft Internet Explorer 5+ (Windows seulement). Comme cette application en JavaScript est formatée en modules, le développeur utilise les modules dont il a besoin sans être obligé de prendre l’application entière. La meilleure façon de faire est de construire le site normalement, puis de tester dans divers navigateurs et de remédier aux problèmes avec les bidouillages proposés. Enfin, si certaines erreurs sont rédhibitoires, utilisez Internet Explorer 7 pour les gommer. Il faut quand même prendre en compte le fait que certains internautes ont désactivé la fonction JavaScript sur leur navigateur. Ce genre d’application est un gain de temps et permet d’utiliser par exemple les pseudo-éléments :before et :after pour créer des cadres, ou du moins de placer un haut pour les coiffer et un bas pour les chausser. #cadre:before { content:url(haut.png); } #cadre:after { content:url(bas.png); } #cadre { background-color:#b9b9b9; border: 1px solid #555; width:200px; } Ce genre de code est infaisable habituellement car Internet Explorer n’accepte pas ces pseudo-éléments. On trouve Internet Explorer 7 sur le site de Dean Edwards (http://dean.edwards.name/IE7/). 566 • Double Poche CSS
  17. Relooker des formulaires hr est la balise utilisée pour figurer une ligne de séparation. Elle est peu employée. Mais avec les CSS, elle reprend du service. Pour avoir un trait de séparation simple avec une CSS, il faut un code assez simple. hr { border: 0; width: 80%; } Pour créer un trait plus épais en bleu, il faut caractériser le fond et le contour de la même couleur. hr { color: #00F; background-color: #00F; height: 5px; } Ici, il faut utiliser, à la fois, les propriétés color et background−color. La première propriété est insérée pour Internet Explorer tandis que la deuxième est présente pour les autres navigateurs. Il est intéressant d’utiliser une image comme séparateur pour afficher un motif grâce à une astuce. Ce code XHTML est nourri par la feuille de style : div.hr { height: 15px; background: transparent url(motif.gif) no-repeat scroll center; } div.hr hr { display: none; } Pour Internet Explorer, est un élément en ligne d’une hauteur de 7 pixels par défaut avec des padding haut et bas figés à 7 pixels. Avec un Double Poche CSS • 567
  18. 4 La réalisation du site display: block et une marge négative de 7 pixels, le trait est affiché correctement sur Internet Explorer. hr { display:block; height: 1px; margin: 0; _margin: -7px 0; padding: 0; color: #03A; background-color: #03A; border: 0; } Premier contenu Second contenu Le blanc souligné devant margin rend cette propriété invisible à tout autre navigateur que Internet Explorer. Ici les deux contenus sont séparés d’une ligne bleue de 1 pixel d’épaisseur sans aucune marge. Une fois les marges à 0, tout ce que le développeur ajoute comme marge dans les div ou dans le hr – en plus des 7 pixels de marge négative – .est comptabilisé, par exemple margin: 6px appose une marge d’1 px. 4.7 Conclusion Après avoir abordé les différents aspects du code, il s’agit de le vérifier sur le terrain et de compléter sa connaissance au contact de la "réalité" dans le prochain chapitre. 568 • Double Poche CSS
  19. 5 É tudes de te rrain
  20. 5 Études de terrain Une étude de terrain pour récolter des connaissances en CSS demande d’avoir Firefox et son extension Web Developer. Cette extension permet de découvrir ce qui se cache derrière un beau site. Les peintres vont au Louvre, les écrivains lisent des livres puis écrivent "à la mode de", les développeurs de sites web vont à la pêche avec Firefox et Web Developer, non pour plagier, mais pour emprunter des éléments intéressants afin d’enrichir leur expression personnelle et surtout de savoir comment a été fabriqué un site. La feuille de style est parfois illisible sans le code source, qui lui-même est illisible car trop touffu, trop long, trop complexe. La solution est d’utiliser l’éditeur de feuille de style de Web Developer et de constater les changements opérés sur la page du site, à la suite d’une modification de couleur entre autres. Cette galerie de sites met en avant de bonnes pratiques ou du code particulièrement intéressant. Parfois l’ergonomie ou l’aspect visuel sont remarquables. Ce chapitre permet de vérifier in situ les différents aspects d’un site web. 5.1 Quelques sites Les quelques sites présentés ont été choisis dans des domaines différents, pour leur charte graphique harmonieuse et leur approche originale du code ou d’une partie du code CSS. Un site communicant Le premier site communique beaucoup et bien autour de ses choix de code CSS et de leurs conséquences (peu importe le code relatif aux menus dynamiques). L’auteur a une volonté de partager ses trouvailles, de bénéficier de l’écho des webmasters qui l’utilisent et ainsi de l’améliorer. C’est exactement la philosophie des applications distribuées sous des licences "open source". L’auteur désigne les éléments invariables du code et les éléments qui peuvent être modifiés sans interférer avec la fonctionnalité du menu. C’est une vraie documentation, qui fournit des indications concrètes sur la page, ainsi que sur des classes ou des identifiants. 570 • Double Poche CSS
Đồng bộ tài khoản