MySQL et CSS- P11

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

0
39
lượt xem
5
download

MySQL et CSS- P11

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

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

  1. La disposition div .cadre { padding: 10px; margin: 10 px; background-color: #233A00; font-size: smaller; } La stratégie de l’emplacement des blocs vise plusieurs objectifs : ¶ hiérarchiser l’information ; ¶ attirer l’attention du lecteur en cassant un agencement trop symétrique et ordonné ; ¶ casser les gros pavés illisibles en petites unités pour donner plusieurs perspectives sur le même contenu ; ¶ entraîner le lecteur, par des accroches soigneusement disposées, à lire l’article entier. m Figure 3.12 : Disposition des informations Un coup d’œil sur certaines pages peut causer une indigestion. La subtilité consiste à donner plusieurs entrées à l’article. Avant la lecture était littérale. Maintenant elle est de plus en plus spatiale. Les téléspectateurs voient chaque chaîne de télévision comme une facette d’un réel morcelé. Double Poche CSS • 501
  2. 3 Les règles de mise en page Avec la mode des mangas par exemple, les jeunes prennent l’habitude de lire un livre en commençant par la fin, à la façon japonaise. Sur le Web, il en est de même : le visiteur s’introduit dans le site par n’importe quelle page, parcourt, clique, revient, lit encore, comme quand il cherche sur sa télévision le morceau de réel qui va l’intéresser 5 minutes. 3.4 La couleur La couleur s’exprime de plusieurs façons, via les images, la police de caractères et le fond, qu’il s’agisse de blocs ou de menus, et enfin les filets. m Figure 3.13 : Le chromographe Les couleurs sont restituées à partir des trois couleurs primaires : le rouge, le vert et le bleu (RVB ou RGB). Le mélange des trois donne le blanc en couleurs additives et le noir avec des couleurs soustractives. Les différen- ces de proportion reconstituent les couleurs du spectre. Les couleurs additives sont obtenues avec une source lumineuse comme un spot, un projecteur vidéo ou un écran d’ordinateur (CFT ou LCD). Les couleurs soustractives sont obtenues par le mélange des colorants (procédé utilisé dans l’imprimerie). Comme la somme de tous les pigments ne donne pas 502 • Double Poche CSS
  3. La couleur exactement le noir, mais un marron foncé, on a ajouté le noir. Ainsi ce procédé se nomme CMJN (cyan, magenta, jaune et noir). C’est la quadrichromie. Le contexte coloré de l’ensemble joue aussi un rôle essentiel sur la perception de la couleur d’un objet. Ainsi, une police de caractères rouge ou bleue sur un fond noir paraît plus claire, et plus foncée sur un fond blanc. Ces effets de contraste ainsi que d’autres mécanismes visuels interviennent dans la perception de la couleur. m Figure 3.14 : http://provisoire.com L’œil est influencé par la perception du cerveau. Dans les langues celtiques, la couleur glas (en breton) représente le vert, le bleu et le gris avec, pour référence, l’ardoise. En breton moderne, le mot "gwer" a été ajouté pour caractériser les étoffes vertes (le vert synthétique). Les anciens Bretons distinguaient-ils ce vert ? Cette étude a aussi été faite sur les anciens Grecs. Ainsi le cerveau distingue différemment les couleurs, selon leur contexte et selon la culture du spectateur. Double Poche CSS • 503
  4. 3 Les règles de mise en page m Figure 3.15 : Couleur ardoise bleu-ardoise.fr La balance des blancs dépend de la température de couleur. Elles ne sont pas les mêmes selon le moment du jour : elles passent du rouge au jaune, puis au bleu. Ces variations sont mesurées en kelvins. Les écrans d’ordinateurs sont calibrés différemment selon leur type (autour de 9 300° K pour un CFT, et de 6 500° K pour un TFT) et leur marque. Le calibrage se fait sur un blanc "neutre". C’est l’étalon sur lequel se base tout le spectre affiché à l’écran. ¶ 9 300° K (blanc bleuté lumineux) ; ¶ 7 500° K (blanc bleuté) ; ¶ 6 500° K (blanc légèrement bleuté) ; ¶ 5 000° K (blanc légèrement jaune) (voir Figure 3.16). Ainsi le spectre de couleurs que le développeur voudra rendre sur son site variera d’un moniteur à l’autre. Il est donc inutile d’être trop perfection- niste dans ce domaine. On distingue les couleurs froides, chaudes ou neutres, relaxantes ou toniques, complémentaires ou opposées, etc. 504 • Double Poche CSS
  5. La couleur m Figure 3.16 : Balance des blancs Le logiciel Color Schemer permet de dégager quelques couleurs dominan- tes. À celles-ci peut s’ajouter une couleur tonique qui "réveillera" le visiteur. Il existe deux principales propriétés de couleur : ¶ color concerne la couleur de surface, c’est-à-dire le plus souvent la couleur du texte. ¶ background−color désigne la couleur de fond. Notation hexadécimale Les couleurs sont désignées par un code hexadécimal complet (ou abrégé), de 6 caractères précédés par un dièse (#), ce qui permet d’éco- nomiser de la place. 16 777 216 couleurs sont ainsi répertoriées. b Figure 3.17 : Hexa Double Poche CSS • 505
  6. 3 Les règles de mise en page Le code hexadécimal des couleurs Les nombres en Occident sont en base 10 (de 0 à 9). C’est le code décimal. Le code hexadécimal est en base 16. Après 9, il utilise les lettres A pour 10, B pour 11… jusqu’à F pour 15. La couleur est codée sur 8 bits. Chaque couleur de base (rouge, vert, bleu) est codée sur deux caractères (de 16 possibilités chacun), ce qui donne 256 possibilités, donc 2163, soit 16 777 216 possibilités. Le code cou- leur de ce qu’on appelle les couleurs sécurisées, référence 216 couleurs. Les codes formés de paires de caractères identiques peuvent être abrégés. Ainsi #11BBDD correspond à #1BD. Notation par mot-clé Les couleurs peuvent être nommées par leur nom en anglais : Tab. 3.7 : Les mots-clés représentant les couleurs Mot-clé Correspondance aqua Cyan black Noir blue Bleu moyen fuchsia Rose fuchsia gray Gris foncé green Vert moyen lime Vert printemps maroon Marron foncé navy Bleu marine olive Vert olive purple Violet red Rouge silver Gris moyen teal Vert sapin 506 • Double Poche CSS
  7. La couleur Tab. 3.7 : Les mots-clés représentant les couleurs Mot-clé Correspondance white Blanc yellow Jaune m Figure 3.18 : Couleurs prédéfinies Attention aux erreurs d’orthographe en anglais ! color: teal; Notation en pourcentage Cette notation consiste à calibrer de 0 % à 100 % la quantité de chaque composante (rouge, vert, bleu) d’une couleur, 0 % correspondant à l’absence de la composante. Il est possible d’utiliser des décimales, ce qui accroît le nombre de nuances possibles. color: rgb(42%, 70.25%, 0%); Double Poche CSS • 507
  8. 3 Les règles de mise en page Notation décimale Cette notation utilise les nombres de 0 à 255 pour caractériser la propor- tion des composantes (rouge, vert et bleu) de la couleur. color: rgb(25, 0, 255); 0 dénote l’absence de la composante et 255 la présence à 100 % de la composante. Notation en référence à l’interface de l’utilisateur Cette notation donne au développeur les outils pour imiter les fonction- nalités auxquelles l’utilisateur est habitué. Ces couleurs intègrent l’inter- face du navigateur avec les couleurs du site comme sur le site Gaesys (www.gaesys.com). m Figure 3.19 : Gaesys Certaines possibilités, comme la coloration de la barre de défilement du navigateur, ne sont disponibles qu’avec Internet Explorer. Pour intégrer cette glissière verticale, il faut dans ce cas intégrer la couleur de l’ascenseur dans la page. 508 • Double Poche CSS
  9. La couleur Tab. 3.8 : Les couleurs se référant à l’interface de l’utilisateur Désignation Signification ActiveBorder Couleur de la barre de titre active de la fenêtre ActiveCaption Couleur du titre de la barre de titre active de la fenêtre AppWorkspace Couleur de l’arrière-plan de la fenêtre de l’application active Background Couleur de l’arrière-plan du Bureau ButtonFace Couleur des boutons des boîtes de message ButtonHighlight Couleur des ombrages en 3D des boutons des boîtes de message ButtonText Couleur du texte des boutons dans les boîtes de message CaptionText Couleur des titres dans les boîtes de message GrayText Couleur du texte désactivé dans les boîtes de message Highlight Couleur des éléments sélectionnés dans des listes de choix HighlightText Couleur du texte sélectionné InactiveBorder Couleur d’une ligne de titre d’une fenêtre non active InactiveCaption Couleur du titre dans la ligne de titre d’une fenêtre non active InfoBackground Couleur de fond des info-bulles InfoText Couleur du texte des info-bulles Mmenu Couleur des barres de menus MenuText Couleur des éléments de menus Scrollbar Couleur de la barre de défilement dans les fenêtres ThreeDDarkshadow Couleur sombre des ombrages des éléments 3D ThreeDFace Couleur des éléments 3D ThreeDHighlight Couleur des éléments 3D sur lesquels l’utilisateur vient de cliquer ThreeDLightShadow Couleur claire des ombrages des éléments 3D ThreeDShadow Couleur sombre des ombrages des éléments 3D Window Couleur d’arrière-plan des fenêtres de document WindowFrame Couleur des bordures de fenêtre WindowText Couleur de texte normal des fenêtres de document Double Poche CSS • 509
  10. 3 Les règles de mise en page On peut imaginer une fausse fenêtre de message, créée de toute pièce à partir des attributs de couleur courants. .fenetre { color: buttonText; } Les couleurs et images d’arrière-plan La couleur de fond obéit à la propriété background−color. body { color: black; background-color: #FD9; background-image: url(images/image_de_fond.png); background-repeat: no-repeat; background-position: top left; } L’image désignée par background−image peut être répétée avec background−repeat et positionnée avec background−position. m Figure 3.20 : Fond fixe 1 hersandesign.com 510 • Double Poche CSS
  11. La couleur Il est possible de faire en sorte que le décor suive l’ascenseur vertical. background-attachment:fixed; m Figure 3.21 : Fond fixe 2 hersandesign.com Les valeurs peuvent être regroupées dans la propriété background de la façon suivante : background: background−color background−image background− repeat background−attachment background−position; body { background: navy url(image_de_fond.png) no-repeat fixed left bottom; } Background-position La propriété background−position définit une position verticale et une position horizontale : top ou bottom, left ou right. Cette position peut Double Poche CSS • 511
  12. 3 Les règles de mise en page être aussi un pourcentage de gauche à droite et de haut en bas (de 0 % à 100 %). background-position: 0% 100%; L’équivalent est : background-position: top right; Pour placer un décor au milieu : background-position: top right; L’équivalent est : background-position: 50% 50%; Background-repeat La valeur par défaut de background−repeat est repeat. Tab. 3.9 : La répétition du décor Valeur Effet no−repeat L’image n’est affichée qu’une fois. repeat−x L’image est répétée horizontalement. repeat−y L’image est répétée verticalement. repeat L’image est répétée ad libitum. 3.5 La pagination La pagination dans un livre est la distribution du texte en pages qui se suivent, tandis que sur le Web, la pagination ne comporte pas d’ordre : chaque page est plutôt un chapitre avec un texte beaucoup plus court que celui d’un livre. Par ailleurs, le visiteur peut entrer dans le site par n’importe quelle page. De cela découlent plusieurs obligations : ¶ faciliter l’identification de la page ; ¶ reporter les éléments de navigation sur chaque page ; ¶ garder une cohérence tout au long des pages du site. 512 • Double Poche CSS
  13. La pagination Faciliter l’identification de la page Il s’agit de donner un titre explicite et de bien caractériser le sujet de la page. Pour indiquer un titre, il existe plusieurs manières de procéder. Il est possible de l’intégrer sur la page en haut au centre via la balise h1. La barre ou le menu de navigation peut désigner la page courante par une couleur différente. Le lien peut prendre une autre couleur par le seul fait qu’il ne comporte que l’intitulé qui, alors, n’est pas encadré par la balise .vers une page quelconque. Reporter les éléments de navigation Le menu de navigation est une clé du site : il contient les liens vers chaque page, il hiérarchise l’information et lui donne une cohérence. La cohé- rence est donnée par l’ordre d’affichage des liens, ce qui constitue déjà une hiérarchie, mais aussi par des marqueurs comme des couleurs ou des puces différentes. Il est aussi possible de suggérer quelle est la page suivante, via un lien au bas de la page courante qui conduit vers la page suivante avec un intitulé explicite. Ce lien vers la page suivante est très souvent utilisé sur des sites linéaires, comme les tutoriaux. m Figure 3.22 : www.bleu-safran.com Double Poche CSS • 513
  14. 3 Les règles de mise en page Garder la cohérence La cohérence d’un site est surtout basée sur sa charte graphique, c’est-à-dire sur l’habillage des pages et la disposition des textes, des titres, des menus, qui font que le visiteur sait immédiatement sur quel site il se trouve. C’est l’identité graphique du site. Une façon de l’identifier est aussi d’insérer une icône dans la barre d’adresse et dans l’onglet dans les navigateurs à onglets, ainsi que dans les favoris. Cette icône placée dans le répertoire principal est nommée favicon.ico. C’est ici qu’intervient la feuille de style à laquelle toutes les pages sont rattachées. La feuille de style donne un cachet au site et aide les internautes à l’identifier. 514 • Double Poche CSS
  15. 4 La réalis ation d u site
  16. 4 La réalisation du site 4.1 La page d’accueil La page d’accueil est essentielle. Elle donne une première impression, qui sera primordiale pour l’internaute dans sa décision de poursuivre sa visite. m Figure 4.1 : Une vraie page d’entrée La page d’accueil s’affiche quand l’internaute saisit le nom de domaine du site. Si elle est nommée index et qu’elle soit la seule à porter ce nom de fichier, elle s’affiche quand l’internaute saisit http://ardaee.com dans cet exemple. L’extension de fichier peut être .htm ou .php. Il est important que le visiteur soit directement dans le sujet, sans page intermédiaire sur laquelle cliquer, ou pire, sans avoir à attendre qu’une animation se termine ou à chercher un lien trop discret sur lequel cliquer. La page d’accueil garde la même configuration, ou au moins un même aspect graphique, que le reste du site. Le logo peut être plus gros que sur le reste des pages, pour signifier l’importance de cette page. Si une bannière de publicité apparaît en haut, il vaut mieux faire en sorte que 516 • Double Poche CSS
  17. La page d’accueil cette publicité ne puisse pas être confondue avec le titre de la page ou prise à tort pour le thème du site. Lien vers la page d’accueil Si la barre des liens est identique sur chaque page, il est préférable de ne pas avoir un lien actif vers la page d’accueil sur ladite page d’accueil et de distinguer le lien inactif par une couleur qui le démarque des autres liens. La page d’accueil contient les liens de navigation vers tout le site, l’information essentielle qu’il propose et les dernières nouvelles. En entrant dans la page d’accueil, le visiteur doit découvrir le sujet du site et les thèmes qui seront abordés dans ses pages. Son regard ne doit pas avoir à chercher où aller. Soit le site est un site d’information et il affiche les nouvelles dans sa page d’accueil, soit c’est un autre type de site et les liens de navigation doivent être mis en évidence. En effet, si le nouveau venu s’attarde un peu sur la page d’accueil, l’internaute fidèle, lui, prend la page d’accueil comme un carrefour, un accès central aux autres pages et aux annonces de mise à jour. "Que vient chercher l’internaute sur le site ?" est la bonne question à se poser. Il doit trouver aisément ce qu’il vient chercher en cliquant le moins de fois possible sur des liens. m Figure 4.2 : Le moteur de recherche comeverbena.com Double Poche CSS • 517
  18. 4 La réalisation du site Certains visiteurs préfèrent utiliser un moteur de recherche pour naviguer sur un site. Il est donc indispensable d’en installer un en première page. Le moteur de recherche Atomz est gratuit dans sa version basique (www.osinet.fr/code/prix.asp?CodeMarque=ATOMZ) et s’insère par- faitement dans un site, en en prenant les couleurs. m Figure 4.3 : Atomz Le titre de cette page donne un premier indice du contenu du site. Entre les balises title, il vaut mieux éviter d’inscrire "Page d’accueil d’Écoute S’il Pleut" et préférer "Écoute S’il Pleut, Invitez−vous au jardin extraordinaire !" par exemple, plutôt que "Bienvenue sur notre page d’accueil". Sur la page d’accueil, le visiteur est à la croisée des chemins. Plusieurs options peuvent être choisies : ¶ soit afficher les liens avec chaque thème résumé par un petit paragraphe ; ¶ soit afficher simplement les liens comme sur n’importe quelle page ; 518 • Double Poche CSS
  19. Le site ¶ soit faire un texte unique qui introduit certaines rubriques plus importantes. m Figure 4.4 : www.clic-images.com Le texte de la page d’accueil doit séduire pour donner envie d’aller plus loin. Même si le visiteur a envie de connaître le thème traité par le site, son désir a besoin d’être attisé. Il faut instaurer ici la confiance, voire la connivence. Le visiteur vient sur la page d’accueil, attiré par un intitulé dans le moteur de recherche ou un lien sur un autre site. Souvent, il ouvre le lien en affichant une nouvelle fenêtre ou en se disant qu’il pourra toujours revenir en arrière avec le bouton adéquat sur son navigateur. Ainsi il parcourt rapidement la page d’accueil pour vérifier si le site satisfait sa curiosité. Il est donc nécessaire de l’accrocher par ce qui fait l’originalité du site. Cette information originale doit être mise en avant, à un endroit stratégique de la page. 4.2 Le site La création du site a commencé par la création du logo, composé d’un fond jaune clair (#FFFFE1) sur lequel figure la phrase "Les jardins d’Écoute S’il Pleut", dont la première partie est colorée en vert clair Double Poche CSS • 519
  20. 4 La réalisation du site (#8CBD23) et la deuxième en bleu foncé (#1D1779) avec une ombre portée. La carte du site a été dressée, ce qui permet de monter les liens de navigation. Deux types de liens de navigation se sont dégagés : ceux concernant le gîte et le tourisme et ceux tournés vers le commerce et le service. Il est indispensable de matérialiser leur différence. Le choix des couleurs se porte vers un dégradé de verts : d’un côté des verts à dominante jaune, de l’autre des verts à dominante bleue. m Figure 4.5 : La bannière ardaee.com La construction d’un site commence par la rédaction d’un cahier des charges qui répertorie les desiderata du client et l’aide à préciser sa demande. Ensuite le graphiste crée une page type sur un logiciel graphique. La création des feuilles de style vient ensuite. Dans notre cas, il est décidé de mettre la totalité des liens de navigation sur chaque page de façon à ce qu’un visiteur atterrissant sur une page quelconque du site ait les outils pour remonter à la page d’accueil ou évoluer directement dans le site. 4.3 Le XHTML Le XHTML est un HTML plus strict au niveau de ses règles. Les règles sont assez simples à énumérer et des programmes de validation permettent de détecter les erreurs de syntaxe (voir Figure 4.6). ¶ Toute balise ouvrante doit comporter une balise fermante ou un trait oblique signalant que cette balise est ouvrante et fermante. ¶ Les containeurs peuvent s’imbriquer, mais pas s’entrelacer. ¶ Les noms des balises et des propriétés doivent être en minuscules. ¶ Les propriétés ou attributs doivent avoir une valeur. ¶ Les valeurs des propriétés sont encadrées par des guillemets. ¶ Le standard utilisé pour le code de la page doit être précisé. 520 • Double Poche CSS
Đồng bộ tài khoản