[PDF] CSS 2 - Pratique du design web

View - Download CSS 2 - Pratique du design web

Previous PDF

Next PDF

CSS 2 2 e

édition

CSS 22

e

édition

Pratique du design web

9 7 8 2 2 1 2 1 1 9 7 6 3

Code éditeur : G11976

ISBN : 978-2-212-11976-3

Les feuilles de styles CSS, dont la norme actuelle est CSS2, sont l'un des gages de qualité de toute concep-

tion web moderne : on peut grâce à elles créer des sites élé gants et légers, conformes aux standards du

Web et accessibles à tous.

La normalisation des langages HTML, XHTML et CSS permet peu à peu de s'assurer de l'universalité des documents web et il est devenu capital de concevoir des sites compatible s tous navigateurs et séparant parfaitement le contenu de la présentation. Ce livre explique sans détours comment concevoir en XHTML et CSS des sites web modernes et acces- sibles à tous, fonctionnant aussi bien sous Internet Explorer que Moz illa Firefox, Opera, Safari et autres navigateurs conformes. Il aborde les grands classiques de la conception de feuilles de styles CSS et leurs problématiques concrètes : flux et positionnement (suppression de s tableaux), préchargement, priorité de déclaration de classes CSS, gestion de la couleur, typographie, bordu res et arrière-plan, menus et images réactives, cadres, etc. Plusieurs variantes sont proposées, ainsi que la manière de contourner les bogues des navigateurs. Des exemples de gabarits prêts à l'emploi sont donnés en fin d'ouvrage ainsi qu'une liste des propriétés CSS et un comparatif par navigateur des limites d' interprétation de ces propriétés. Cette deuxième édition, mise à jour et augmentée, décrit les fonctionnalités apportées par le navigateur Internet Explorer 7 ainsi que les différents Doctypes. Elle approfond it la gestion des erreurs des navigateurs et explique comment les isoler et les résoudre (commentaires conditi onnels, comportement Haslayout...).Au sommaire

XHTML et CSS•Compatibilité des navigateurs web•Accessibilité aux handicaps•Valider son site avec le W3C•

Les feuilles de styles CSS•Syntaxe de base des CSS•Appliquer les styles CSS•Incorporer les styles dans la

balise•Référencer des styles dans l'entête du document•Lier les styles à partir d'une feuille séparée•Balises

et règle @import• Les sélecteurs de styles•Balises, classes, identificateurs, pseudo-classes et pseudo- éléments•Syntaxes de regroupements•Les sélecteurs et l'arborescence•

Gestion de la couleur en CSS•La

symbolique des couleurs. Les notations RGB et hexadécimale• Typographie•Polices de caractères•Polices

standard et polices exotiques•Utiliser un format graphique•Utiliser le format PDF•Importer des polices•

Empattements et chasse•Tailles fixes et relatives• Styles et effets•Gérer l'interlignage et la justification de texte•

Bordures, arrière-plans et images•Positionnement en CSS•Comprendre le modèle de boîte•Éléments

ancêtres, parents, enfants et frères• Comprendre la notion de flux•Positionner dans le flux courant, relatif, ou absolu•Profondeur : z-index•Positionnement flottant• Construire un menu en CSS•Image réactive et menu

graphique•Cadres arrondis et/ou graphiques•Compatibilité tous navigateurs•Concevoir les éléments de

navigation

•Les systèmes de navigation•Menu général•Plan du site•Moteur de recherche•Aller plus loin

avec les CSS

•Insérer du contenu dynamiquement•Proposer des styles alternatifs•Faire une version

imprimable•

Annexes•Liste des propriétés CSS•Exemples de gabarits•Compatibilité des propriétés CSS

en fonction des navigateurs Internet Explorer, Mozilla (Firefox) et Op era.

À qui s'adresse cet ouvrage ?

- À tous les concepteurs de sites souhaitant passer aux feuilles d e styles CSS et rendre leur site conforme; - Aux webmestres professionnels cherchant une référence pratiqu e sur les CSS.

R. Goetter

Webdesigner et gérant

d'une agence web strasbourgeoise,

Raphaël Goetter

partage ses connaissances

à travers son site

Alsacréations.com,

et s'intéresse de près aux domaines des normes du Web et de l'accessibilité.

Il fait partie du collectif

Openweb.eu.org, référence

francophone en matière de standards du Web.

R. Goetter

Conception: Nord Compo32?

Raphaël Goetter

Préface d'Élie Sloïm

CSS 2

Pratique du design web

2 eédition11976_CSS2_blanch 9/03/07 17:03 Page 1 CSS 2

Pratique du design web

2 e

Èdition

Titre_CSS2_2_XP 22/02/07 18:00 Page 2

Du mÍme auteur

R. G OETTE

R. - Mémento CSS.

N°11726, 2006, 14 pages.

R. G OETTE

R. - Mémento XHTML.

N°11955, 2006, 14 pages.

Ouvrages sur le dÈveloppement web

E S

N°12101, 2007, 14 pages.

S P OWE

RS. - Débuter en JavaScript.

N°12093, 2007, 386 pages.

T. T EM P LIE

R, A. GOUGEON. - JavaScript pour le Web 2.0.

N°12009, 2007, 492 pages.

C. P O RTENEUVE, préface de T. Nitot - Bien développer pour le Web 2.0 - Bonnes pratiques Ajax

N°12028, 2007, 580 pages.

M . N EB

RA. Réussir son site web avec XHTML et CSS.

N°11948, 2007, 306 pages.

F D RA ILL

ARD - Premiers pas en CSS et HTML.

Guide pour les dÈbutants.

N°12011, 2006, 232 pages.

M. P L ASS

E. - Développez en Ajax.

N°11965, 2006, 314 pages.

J. Z EL D M A

N. - Design web : utiliser les standards.

CSS et XHTML

N°12026, 2e édition 2006, 444 pages.

H. W

ITTENB

R

IK. - RSS et Atom. Fils et syndications.

N°11934, 2006, 216 pages.

E. D ASP

ET et C. PIERRE de GEYER. - PHP 5 avancé.

N°12004, 3e édition 2006, 804 pages.

G. P

ONÇON. - Best practices PHP 5.

Les meilleures pratiques de dÈveloppement en PHP.

N°11676, 2005, 480 pages.

T. ZIADÉ. - Programmation Python.

Syntaxe, conception et optimisation

N°11677, 2006, 530 pages.

J. P R OT Z

ENKO, B. PICAUD. - XUL.

N°11675, 2005, 320 pages.

R. R

IMELÉ. - Mémento MySQL.

N°12012, 2007, 14 pages.

Autres ouvrages : Web et logiciels libres

M G R

EY. - Mémento Firefox et Thunderbird.

N°11780, 2006, 14 pages.

D. M E R CE R, S. BURRIEL. - Créer son site e-commerce avec osCommerce en libre et gratuit.

N°11932, 2007, 460 pages.

S. G A UTIE

R et al. - OpenOffice.org 2 efficace.

N°11638, 2006, 420 pages avec CD-Rom.

O S

ARAJA. - La 3D libre avec Blender.

N°11959, 2006, 370 pages.

C . G

ÉMY. - Gimp 2 efficace.

N°11666, 2005, environ 350 pages.

J B

ATTELLE - La révolution Google.

N°11903, 2006, 280 pages.

PERLINE, A.-L. et D. QUATRAVAUX, M.-M. MAUDET. - SPIP 1.9.

CrÈer son site avec des outils libres.

N°12002, 2e édition 2007, 376 pages.

S. B LON D

EEL. - Wikipédia. Comprendre et participer.

N°11941,

2006, 168 pages (collection Connectez-moi

F. L E FESSANT. - Le peer-to-peer. Comprendre et utiliser.

N°11731,

2006, 168 pages (collection Connectez-moi

C . B ÉC H

ET. - Créer son blog en 5 minutes.

N°11730,

2006, 132 pages (collection Connectez-moi

F. D UME S NIL. - Les podcasts. ...couter, síabonner et crÈer.

N°11724,

2006, 168 pages (collection Connectez-moi

CHEZ LE MÊME ÉDITEUR

R a p h a Î l G o e t t e r

avec la contribution de S È b a s t i e n B l o n d e e l , E m m a n u e l P i e t r i g a e t J e a n - M a r i e T h o m a s CSS 2

Pratique du design web

2 e

édition

Titre_CSS2_2_XP 22/02/07 18:00 Page 1

...DITIONS EYROLLES

61, bd Saint-Germain

75240 Paris Cedex 05

www.editions-eyrolles.com

Le code de la propriÈtÈ intellectuelle du 1

er juillet 1992 interdit en effet expressÈment la photocopie ‡

usage collectif sans autorisation des ayants droit. Or, cette pratique síest gÈnÈralisÈe notamment dans les

Ètablissements díenseignement, provoquant une baisse brutale des achats de livres, au point que la possibilitÈ

mÍme pour les auteurs de crÈer des úuvres nouvelles et de les faire Èditer correctement est aujourdíhui

menacÈe.

En application de la loi du 11 mars 1957, il est interdit de reproduire intÈgralement ou partiellement le

prÈsent ouvrage, sur quelque support que ce soit, sans autorisation de líÈditeur ou du Centre FranÁais díExploitation du

Droit de Copie, 20, rue des Grands-Augustins, 75006 Paris. © Groupe Eyrolles, 2005, 2007, ISBN : 978-2-212-11976-3

DÈpÙt lÈgal : mars 2007

N díÈditeur : 7603

ImprimÈ en France

Confier ‡ un spÈcialiste de la qualitÈ web le soin de prÈfacer un ouvrage sur líuti-

lisation conjointe de technologies comme HTML et CSS ? Quelle drÙle díidÈe !

Auraient-elles un impact

quelconque sur la qualitÈ des sites web ? Au-del‡ de leur aspect pratique et moderne, permettraient-elles de travailler mieux et plus vite ? Auraient-elles des effets positifs sur la qualitÈ de service dÈlivrÈe aux utilisateurs ? Vous líaurez devinÈ : jíen suis intimement persuadÈ, et je vais míefforcer de vous expliquer pourquoi. Bien quíÈtant de plus en plus souvent amenÈ ‡ travailler directement sur le code des sites web, je ne suis pas ‡ proprement parler un dÈveloppeur. Comme une immense majoritÈ des concepteurs de sites web, je ne suis quíun amateur qui a commencÈ sur Internet en mettant en place des sites personnels ou de toutes petites entreprises. De fait, la phase de dÈcouverte du mÈdia a ÈtÈ menÈe par un nombre immense díamateurs, sur des outils peu standardisÈs, pour crÈer des sites peu professionnels, consultÈs avec des navigateurs qui fai- saient finalement un peu ce quíils voulaient du code qui leur Ètait proposÈ. Cíest dans ce contexte que nous avons tous appris ‡ coder, et en ce qui me concerne, cíest dans ce contexte que je me suis posÈ les premiËres questions sur la qualitÈ des sites web.

Préface

CSS 2 ñ Pratique du design web

VI Pendant deux ‡ trois ans, jíai ainsi travaillÈ avec un certain nombre de collË- gues et díÈtudiants sur les critËres de qualitÈ des sites web. Nous avons trËs rapidement pu nous pencher sur les problÈmatiques ergonomiques, sur les questions de visibilitÈ et de rÈfÈrencement, sur la question de la disponibilitÈ des sites et sur la qualitÈ des services associÈs, mais pendant toute cette pÈriode, nous níavons jamais vÈritablement posÈ les questions fondamentales : comment dÈvelopper des sites de maniËre standard ? Comment amÈliorer líinteropÈrabilitÈ des sites web ? Comment rendre la maintenance díun site facile et rapide ? Comment rendre les sites accessibles ‡ tous et pour toutes les plates-formes ? Cíest bien dans la rÈponse ‡ ces questions que rÈsident les enjeux majeurs du

livre de RaphaÎl Goetter. LíinteropÈrabilitÈ, la qualitÈ, líaccessibilitÈ, la con-

formitÈ font ‡ líÈvidence partie des critËres fondamentaux de la qualitÈ díun site web. Ces notions font la diffÈrence entre un site efficace pour ses utilisa- teurs et un site qui fonctionne de maniËre efficiente et lÈgËre, tant pour ses utilisateurs que pour ses administrateurs. Lorsque jíai dÈcouvert ce domaine de compÈtences, cíest líensemble de ma vision de la qualitÈ díun site web qui a ÈtÈ bouleversÈe. Avec des technologies reposant sur líutilisation la plus large possible des feuilles de styles CSS, il devenait possible de dÈvelopper des sites multi-plates-formes, accessibles, rapides et faciles ‡ modifier et ‡ maintenir, dynamiques, qui síadaptent au matÈriel, aux compÈtences et aux capacitÈs de leurs utilisateurs, enfin bref, des outils efficaces pour crÈer des sites modernes.

Autrement dit, et par opposition ‡ la

pÈriode de dÈveloppement des sites amateurs que jíÈvoquais prÈcÈdemment, les technologies HTML, XHTML et CSS permettent de crÈer ce que líon peut enfin qualifier de sites de qualitÈ professionnelle.

Lorsque jíai compris la pu

issance des technologies que dÈcrit RaphaÎl dans cet ouvrage, je níavais fait quíun pas modeste, bien quíessentiel, vers la com- prÈhension de leur impact sur la qualitÈ web. Par la suite, jíai pu me rendre compte que líutilisation gÈnÈralisÈe des feuilles de styles induisait des effets majeurs du point de vue de líarchitecture de líinformation et de líergonomie des sites. Elles permettent de rÈduire la taille des fichiers de maniËre quelquefois spectaculaire, diminuant ainsi la charge des serveurs, amÈliorant leur vitesse, accÈlÈrant le chargement des pages.

PrÈface

VII Jíai Ègalement pu constater que cette approche favorisait la rÈflexion sur les contenus et sur leur hiÈrarchisation. Pour travailler efficacement avec les feuilles de styles, il est en effet bÈnÈfique sinon essentiel díoptimiser la valeur sÈmantique ainsi que la structure des contenus proposÈs. UltÈrieurement, les feuilles de styles permettent de mettre en valeur cette sÈmantique. AprËs tout, pourquoi ne pas faire sur les sites web ce que líon fait couramment lorsque líon travaille sur un document texte infiniment moins complexe, en dÈtermi- nant une structure de titres dont chaque niveau est prÈsentÈ de maniËre uni- fiÈe ‡ travers des styles globaux ? Quíon ne síy trompe pas : les technologies dÈcrites et expliquÈes ici ne sont pas des outils miracle : jíai díailleurs pu míen rendre compte assez rapidement, lorsque jíai souhaitÈ les mettre en application sur mes sites professionnels. Une technologie comme CSS arrive dans un paysage complexe, dans lequel les navigateurs ne se comportent pas tous exactement comme ils le devraient, o˘ les dÈveloppeurs conservent des habitudes et des outils de crÈation encore peu adaptÈs ‡ líutilisation de ces techniques, et o˘, pour finir, les mÈtiers du

Web sont encore en gestation.

Comme toutes les technologies, HTML et CSS níexpriment leur plein poten- tiel que lorsquíelles sont mises dans les mains de personnes qui les maÓtrisent en profondeur. AcquÈrir cette maÓtrise technique prend du temps et suppose un investissement initial. Cependant, le temps que vous investirez dans ces technologies, ‡ commencer par celui que vous consacrerez ‡ la lecture de cet issement utile et durable si vous voulez faire du dÈveloppement de sites web une activitÈ vÈritablement efficiente.

Elie SloÔm,

elie@temesis.com http://openweb.eu.orgquotesdbs_dbs20.pdfusesText_26

[PDF] création d'un site web pdf

[PDF] openclassroom html5 css3

[PDF] html5 et css3 cours et exercices corrigés pdf

[PDF] apprendre ? programmer en c pour les nuls telecharger

[PDF] apprenez ? programmer en c# pdf

[PDF] telecharger apprenez a programmer en c pdf

[PDF] apprendre a programmer en c site du zero

[PDF] apprendre a programmer en c site du zero

[PDF] cours de coréen - niveau débutant (manuel+cahier d'exercices)

[PDF] apprenons le coréen manuel niveau débutant a1-a2

[PDF] situation d'intégration exemple

[PDF] comment enseigner l'orthographe aujourd'hui pdf

[PDF] gymnastique cycle 2

[PDF] gymnastique cycle 3 échauffement

[PDF] gymnastique école primaire