Tài liệu MySQL et CSS- P11 pdf

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. 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é. m Figure 3.12 : Disposition des informations La disposition Double Poche CSS • 501 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 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. 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 m Figure 3.13 : Le chromographe 3 Les règles de mise en page 502 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 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. 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. m Figure 3.14 : http://provisoire.com La couleur Double Poche CSS • 503 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 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. m Figure 3.15 : Couleur ardoise bleu-ardoise.fr 3 Les règles de mise en page 504 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 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. m Figure 3.16 : Balance des blancs b Figure 3.17 : Hexa La couleur Double Poche CSS • 505 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 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 216 3 , 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 3 Les règles de mise en page 506 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Tab. 3.7 : Les mots-clés représentant les couleurs Mot-clé Correspondance white Blanc yellow Jaune 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%); m Figure 3.18 : Couleurs prédéfinies La couleur Double Poche CSS • 507 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 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). 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. m Figure 3.19 : Gaesys 3 Les règles de mise en page 508 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 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 La couleur Double Poche CSS • 509 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 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 3 Les règles de mise en page 510 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... 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 Please purchase PDF Split-Merge on www.verypdf.com to... Frameset ou Strict La DTD Frameset intervient quand la page contient des trames, c’est-à-dire quand la page est divisé en fenêtres La DTD Transitional permet de mettre à jour plus facilement un site en HTML 4 Elle est moins exigeante que la Strict et permet l’utilisation de balises qui ne sont pas dans la DTD, comme la balise center Double Poche CSS • 525 Please purchase PDF Split-Merge on www.verypdf.com... une partie d’un document Elle permet aussi de donner une signification à un contenu, en le Double Poche CSS • 529 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 4 La réalisation du site dénommant à travers la propriété class, à la manière du XML Cette notion de classe permet au code d’être plus spécifique et d’appliquer du code à des objets apparentés Voici des... La règle stricte ne permet pas l’usage de certaines balises, comme dir, menu, center, isindex, applet, font, basefont, s, strike, u, iframe et noframes Certaines propriétés sont aussi refusées La norme XHTML 1.1 est uniquement stricte et ne comporte pas d’autres DTD . 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. cachet au site et aide les internautes à l’identifier. 3 Les règles de mise en page 514 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com