par la pratique
Feuilles de style

Avant-propos

 

Nous vivons actuellement une évolution importante au niveau de l'édition des pages Web !

En effet, depuis l'apparition du CSS (Cascading Style Sheets) et conjointement du modèle objet de Dynamic HTML (navigateurs versions 4 et supérieures), il est possible maintenant de créer des documents HTML (Hyper Text Markup Language) totalement interactifs, ce qui permettra de rendre le Web de plus en plus attrayant, convivial et pratique.

Le but de cette petite initiation n'est pas de vous donner une liste exhaustive de toutes les possibilités que le DHTML et le CSS vous proposent, mais bien de vous permettre d'aborder ces nouvelles techniques.

Vous devez changer quelque peu vos habitudes (si vous êtes déjà webmaster) en ce sens que la création de vos pages HTML doit, pour être conforme à l'évolution actuelle (et ne pas créer des pages bientôt obsolètes) respecter les nouvelles dispositions qui sont en accord avec le CSS, le CSS-P, le DHTML.
Ainsi, l'aspect dynamique de vos documents pourra être réalisé grâce à l'action de scripts qui pourront intervenir directement sur les éléments de celui-ci.
Les auteurs actuels doivent utiliser des feuilles de style pour accomplir leurs effets stylistiques et de mise en forme plutôt que les attributs de présentation HTML. En effet, les attributs de présentation HTML ont été rendus caduques depuis que l'alternative des feuilles de styles existe ! (vous découvrirez ces possibilités tout au long de ce tutoriel)

Actuellement, les deux grands navigateurs (Internet Explorer 5.x et Netscape 4.x) ne sont pas encore totalement compatibles : Internet Explorer 5.x donne beaucoup plus de possibilités d'action (par les scripts) sur les éléments du document HTML. Il semble que la version 5 de Netscape, qui est fort attendue, sera complètement compatible avec les nouvelles normes...

Nous espérons et croyons que cette situation changera et qu'au moins, dans la majorité des cas, hormis quelques particularités, la compatibilité et donc l'interprétation des scripts par les deux grands navigateurs, sera entièrement réalisée. Pour cette raison et votre facilité, la majorité des scripts proposés dans ce tutoriel sera compatible pour les deux grands navigateurs précités.

Pour être complet, Microsoft Internet Explorer 5.x emploie le XML (Extensible Markup Language) et cela pourrait devenir une nouvelle révolution sur Internet. En effet, ce langage plus puissant que l'HTML permet de traduire des documents avec une grande précision quand à leur formatage ou style : la nouvelle Suite Microsoft Office 2002 emploie d'ailleurs ce langage pour traduire ses documents, de format propriétaire (DOC, XLS...), en documents compréhensibles par les navigateurs. C'est une évolution majeure et certainement que les autres navigateurs se conformeront à cette norme. Pour mieux comprendre, ouvrez dans Word2002 un document créé avec une version précédente (.doc) et choisissez l'option d'affichage "WEB" : instantanément, Word2002 vous traduit le document ".doc" en document "WEB" et si vous enregistrez celui-ci au format HTML, vous constaterez la très grande quantité de code particulier, qui est en fait du XML. L'effet est "magique" car le résultat est vraiment surprenant quand au respect du document d'origine (notes de bas de pages, tables des matières...) : il est à remarquer que le travail de Microsoft est remarquable, car Netscape peut visionner les documents ainsi traités !
Pour une bonne introduction à ce nouveau langage et concept, vous pouvez consulter les sites Web qui en parle abondamment (il en existe aussi en langue française, voir l'annexe).

On ne peut omettre également de parler ici d'un autre "système" d'animation qui devient de plus en plus un standard actuellement, qui a proprement parler ne concerne pas le DHTML mais bien l'animation sur le Web, à savoir Flash de Macromedia. Il est certain, d'autant plus que le Web devient de plus en plus rapide (ISDN - ADSL), que toutes les animations du Web se feront avec Flash ou compatible. Pour vous en convaincre, visitez les sites des productions cinématographiques par exemple (Walt Disney), ils emploient tous Flash pour la présentation de leur films...( Exemple d'une animation FLASH )

Enfin, on ne peut dissocier le concept des Feuilles de style et celui du DHTML, c'est pourquoi nous commencerons par une approche des feuilles de style avant de terminer par celle du DHTML proprement dit.

Pour votre facilité, TutorDHTML est compatible avec toutes les résolutions d'écran : bon parcours du tutoriel...


Feuilles de style - Positionnement dynamique - DHTML - Effets de transition (IE) - Annexe
[Table des matières - Accueil Page-Web]