Premières feuilles de style
Un éditeur de texte adapté
Téléchargez cette archive et décompressez-la dans Documents. Dans le répertoire essai_css obtenu, vous trouverez une page web nommée lapage.html. Ouvrez-la avec Bluefish.
Le bouton rond et bleu de la barre d'outils principale sert à afficher dans un navigateur la page dont vous éditez le code source. Essayez-le, et réglez vos deux fenêtres pour les avoir côte à côte comme l'ergonomie élémentaire nous le suggère.
Cet éditeur de texte, Bluefish, a des possibilités de complétion automatique et d'aide contextuelle qui vont vous être utiles dans ce cours (pour éviter d'avoir trop de choses à apprendre par coeur). Par ailleurs, il est gratuit et multiplateforme, vous allez donc l'installer sur votre machine personnelle dès ce soir.
On pourrait aussi bien utiliser n'importe quel autre bon éditeur gratuit, Notepad++ ou Textwrangler par exemple, mais les possibilités ci-dessus n'y existent pas forcément.
Ou bien un logiciel dédié comme Dreamweaver, mais il est payant et la version d'essai est trop courte pour nous à ce jour.
Cela dit, Dreamweaver est installé dans les salles de TD et vous pouvez vous en servir si vous préférez (aussi bien en TD qu'à l'examen), mais ce n'est pas ici un objectif d'apprendre l'usage de ce logiciel (ni de ses concurrents).
Si votre fenêtre Bluefish ne ressemble pas à l'image ci-dessus, faites apparaître ce qui manque via le menu Affichage. De même, vérifiez que votre menu Document a les mêmes options cochées (justifier, coloration syntaxique, encodage utf-8).
Une page web et plusieurs feuilles de style
Regardez le préambule (<head>) du code source, vous y voyez la ligne
<link rel="stylesheet" href="test.css" type="text/css" />
Cette ligne indique au navigateur l'adresse d'une feuille de style, nommée test.css dans notre exemple, qu'il doit utiliser pour dessiner la page. Si cette ligne n'existe pas, ou si la feuille de style ne peut être chargée, le navigateur utilise simplement ses styles par défaut.
C'est le cas pour le moment: il n'y a pas de document test.css dans le répertoire essai_css.
Remplacez dans le code source test.css par test0.css (ce document existe, lui), enregistrez, et réouvrez la page dans une autre fenêtre du navigateur. Le code source du contenu de la page (<body>) n'a pas changé, pourtant l'apparence n'est plus la même: d'autres styles sont maintenant appliqués au lieu des styles par défaut.
On va voir dans ce TD comment obtenir cela.
Vous avez sans doute remarqué le document test1.css dans essai_css.
Peut-être même avez-vous eu la curiosité de remplacer dans le code source test0.css par test1.css, pour voir.
Avez-vous déplacé votre souris sur la fenêtre?
Avec le même code source dans <body>, on a remplacé certains styles par défaut du navigateur, mais aussi sa mise en page.
On verra comment obtenir cela au cours des TDs suivants.