Informatique

Programmation

Accueil > Informatique > Débutant informatique > Feuilles de style avec Dreamweaver

Feuilles de style avec Dreamweaver

Attention : Ce cours date de 2007

Tu dois devenir capable de

Savoir

Préciser le rôle des balises dans un document HTML ;
Préciser la structure d'une directive de style en détaillant le rôle de chaque élément ;
Expliquer l'intérêt des feuilles de style ;
Expliquer le mécanisme en cascade des feuilles de style.

Savoir faire

Visualiser les balises HTML à l'aide de Dreamweaver 2 ;
Définir un style en disposant des informations présentées dans ces pages ;
Définir plusieurs styles pour un même sélecteur ;
Définir plusieurs styles pour plusieurs sélecteurs.

Vocabulaire important

directive de style	balise HTML
sélecteur	styles en cascade
style incorporé	feuille de style liée

Visite en sous-sol: le code HTML

Le logiciel 'Dreamweaver' que nous avons utilisé au chapitre précédent réalise, en fait, tout un travail 'sous-terrain' que nous n'avons pas vu faire.

En réalité, les différentes pages telles qu'elle ont été composées contiennent:

le texte que tu as frappé ;
des indications sur les endroits où se trouvent les images à insérer ;
des balises HTML.

HTML: HyperText Markup Language (langage de notation hypertexte).

HTML consiste en une série de codes compréhensibles par les programmes navigateurs pour la présentation des documents.

Ces balises HTML ont été placées automatiquement par Dreamweaver.

Donc, ce programme a travaillé derrière mon dos sans rien me dire? Et on peut voir ce qu'il a fait?

Bien sûr, on peut voir. Suivez le guide: nous allons visiter les caves de Dreamweaver.

Pas très clair, tout ça. Quelqu'un pourrait faire de la lumière? Où est l'interrupteur?

L'interrupteur est en bas à droite.

La fenêtre d'édition de Dreamweaver 2 (celle dans laquelle tu composes les pages web) montre le document tel qu'il se présentera dans le navigateur. Une autre fenêtre présentant le code HTML est accessible très simplement par plusieurs méthodes:

1.	Dans le coin inférieur droit de la fenêtre principale de Dreamweaver 2, clique sur l'icone présentant deux crochets.

2.	Si la fenêtre du 'lanceur' est présente, clique sur le dernier bouton en bas (ou à droite, selon l'orientation du 'lanceur'. Pour rendre le 'lanceur' visible, clique sur Fenêtre > Lanceur.

3.	Frappe la touche F10 ou clique sur Fenêtre > HTML

Dans chacun des cas, la fenêtre de code HTML apparaît ; les indications qui y figurent peuvent être différentes de celles de l'illustration.

- Mais c'est quoi ce charabia? C'est plein de signes cabalistiques et de mots en anglais. Kezako?

- Ce sont des balises HTML.

- OK, je vais aller voir tout ça. Mais si je ne veux plus voir cette fenêtre?

- Très simple: utilise la même méthode qui t'a permis de la faire apparaître. Si tu repousses l'interrupteur, la fenêtre se ferme.

Quand tu es capable de faire apparaître et disparaître la fenêtre de code HTML, passe à l'étape suivante.

Préparer un document de travail

Pour travailler l'ensemble de ce chapitre, nous allons avoir besoin d'un document sur lequel nous allons opérer certaines manipulations.

1.	Quand la nouvelle fenêtre est ouverte, sélectionne l'ensemble du texte qu'elle contient et transfère-la dans le presse-papiers.

2.	Reviens alors à Dreamweaver et ouvre la fenêtre HTML si elle n'est pas déjà ouverte.

3.	Supprime tout le texte présent dans cette fenêtre et colles-y le contenu du presse-papiers.

4.	Tu peux fermer la fenêtre HTML et voir la page web correspondante.

5.	Retournons à la fenêtre HTML pour en examiner le contenu.

La fenêtre HTML de Dreamweaver se présente maintenant comme sur l'illustration ci-dessous.

Quand ton document de travail est prêt et est enregistré, passe à l'étape suivante.

Les balises HTML

L'animation ci-dessous présente quelques balises HTML.

Les balises <head> et </head> (prononcer 'fin head') définissent les limites de l'entête du document, cependant que les balises <body> et </body> ('fin body') en définissent les limites du corps du texte.

La première ligne du corps du document est le titre principal qui apparaît sur la page: elle est au format 'Header 1', ou 'Titre de niveau 1'. Les balises HTML qui définissent ce format sont <H1> et </H1> ('fin H1').

Deux lignes sont au format 'Header 2', ou 'Titre de niveau 2'. Les balises HTML correspondantes sont <H2> et </H2>.

Les autres lignes sont au format de 'paragraphe' défini par les balises <p> et </p>.

Observe attentivement l'ensemble du texte au format HTML du document composé.

1.	Remémore-toi le rôle de chacune des balises utilisées ici.
2.	Modifie une balise <H2> en <H1> et la balise </H2> correspondante en </H1> ; visualise l'effet en mode 'Normal' ou en mode 'Aperçu'. Veille à modifier aussi la balise de fin, au risque de constater des effets imprévisibles.
3.	Modifie une balise <p> en <H2> et la balise </P> correspondante en </H2> ; visualise l'effet en mode 'Normal' ou en mode 'Aperçu'.
4.	Recompose ensuite le document selon sa forme originelle.

Quand tu as bien compris des balises HTML, passe à l'étape suivante.

Définition d'un style

Les balises HTML dans le document imposent une certaine mise en forme.

Les paragraphes définis en format <H1> sont écrits en lettres de grande taille; les paragraphes en fomat <H2> sont écrits en lettres un peu plus petites, cependant que les caractères des autres lignes sont en petites lettres.

Il s'agit là de la présentation par défaut des pages Web en HTML.

- C'est sympa, qu'un document HTML contienne des présentations par défaut. Mais que se passe-t-il si je trouve que ces présentations sont très laides ? Cela ne correspond pas du tout au look du site web que j'envisage!

- Dans ce cas, il suffit de préciser comment on veut voir les choses. C'est exactement le rôle des directives de styles que nous allons aborder maintenant.

Il est possible de définir une nouvelle présentation pour les éléments prédéfinis; cette présentation doit être indiquée dans une zone délimitée par des balises HTML particulières: <style> et </style>.

Dans l'entête du texte de la page en HTML, introduis les deux balises <style> et </style>.

L'entête du document présente alors un aspect similaire à l'illustation ci-contre à droite.

Entre les balises <style> et </style>, nous allons pouvoir introduire des informations à propos de la présentation du document.

Entre les balises <style> et </style>, introduis la notation suivante:

Clique dans la fenêtre d'édition de Dreamweaver (ou ferme la fenêtre de code HTML) et observe le résultat sur la page web.

Quand tu as observé le résultat, modifie la balise qui figure dans l'expression
H1 {color : blue} :

1.	change <H1> en <H2> et </H1> en </H2> ; observe le résultat dans la fenêtre d'édition ;
2.	restaure la balise H1 {color : blue}
3.	change <H1> en <p> et </H1> en </p> ; observe le résultat dans la fenêtre d'édition ;
4.	ajoute l'expression p {color : red} entre <style> et </style> ; observe le résultat dans la fenêtre d'édition ;

Quand tu as bien compris ce qui se produit lors de l'ajout d'une expression du type XX {color : xxx} dans les balises de styles, passe à l'étape suivante.

Structure d'une règle de style

Bon, on pourrait faire une petite mise au point sur les directives de styles?

Voilà, il n'y a qu'à demander.

Les règles de style se présentent toujours sous une forme semblable à celle de la règle utilisée à l'étape précédente: H1 {color : blue}. Elles sont composées de trois éléments.

sélecteur		propriété		valeur
H1	{	color	:	blue	}

Le sélecteur est généralement une balise HTML comme <body>, <p>, <strong>, ...
De très nombreuses propriétés peuvent être définies pour un sélecteur.
Chaque propriété prend une valeur qui indique comment les objets définis par le sélecteur doivent être présentés.

Quel serait, à ton avis, l'effet de la règle

body {color : green}

introduite dans ton document de travail à la place de la règle définie précédemment?

Réfléchis, puis essaie. Si le résultat ne correspondait pas à ce que tu attendais, retourne à l'explication ci-dessus.

OK, je pense avoir bien compris. Mais que peut-on préciser dans une directive de style?

Une directive de style peut contenir des précisions quant à la présentation de n'importe quel objet présent dans le document HTML. Quelques exemples sont donnés ci-dessous.

Les principales propriétés envisagées dans les règles de style sont:

la fonte de caractères: police, taille, épaisseur,...
la couleur des caractères
les caractéristiques du fond de page: couleur, image, ...
les propriétés du texte: espacement des lettres et des mots, allignement, ...
...

Cette leçon n'est pas un cours complet sur les feuilles de style.

On te demande de maîtriser les éléments qui seront précisés dans les prochaines étapes de cette leçon. Une liste plus complète des propriétés de style peut se trouver sur le web et pourrait être consultée avec profit.

Quand tu as pu répondre correctement à la question posée à propos de la règle de style sur la balise <body>, passe à l'étape suivante.

Définitions de plusieurs styles

- Bon, imaginons maintenant que je veuille mettre les titres de niveau 1 en rouge et souligné. Ou alors que je veuille préciser des choses pour les niveaux 1 et pour les niveaux 2... Comment va-t-on se débrouiller, alors?

- Il est possible de définir plusieurs instructions de style:

Pour le même sélecteur (la même balise HTML): on indique alors les instructions l'une après l'autre, séparées par des ';';

Exemple:

Pour des sélecteurs différents: on indique les instructions complètes sur des lignes différentes.

Exemple:

Applique les deux exemples présentés ici sur ton document de travail.

Quand tu as fini et bien compris comment traiter le problème de plusieurs règles de style, passe à l'étape suivante.

La couleur des caractères

- Et alors, on peut indiquer la couleur que l'on veut? Si je lui dis 'chocolat-bleu-pâle', il va me comprendre?

- Malheureusement, non! Il existe une série de conventions au sujet des couleurs dans les feuilles de styles. Les voici.

Comme indiqué plus haut, la couleur des caractères peut être définie dans une règle de style:

Exemple: {color : maroon}

impose une police de caractères du couleur 'marron'.

Officiellement, les différentes couleurs possibles sont : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white et yellow.
Mais d'autres couleurs sont parfois admises (orange, violet,...). Aucune garantie n'est cependant donnée que tous les navigateurs interpréteront correctement ces valeurs non standard.

Quand tu as réalisé quelques tests de couleurs sur ton document de travail, passe à l'étape suivante.

Styles et fontes des caractères

- OK pour la couleur, mais je voudrais aussi utiliser une police de caractères plutôt cool. Comment faut-il faire, alors?

- Simple, il n'y a qu'à utiliser des directives précisant la fonte des caractères, y compris les variantes (gras, italique, etc.).

La fonte des caractères désigne tout ce qui a trait à la forme des lettres.

Famille de police de caractères: font-family

Les polices de caractères qui interviennent dans un document doivent être définies sur l'ordinateur qui doit afficher cette police. Il n'est pas du tout évident que telle police très particulière définie sur un ordinateur se retrouvera sur n'importe quel autre ordinateur.

Exemple: la directive {font-family : Arial} ne sera reconnue que sur un ordinateur qui dispose de la police 'Arial'.

Plutôt que de définir une police précise, on préfèrera généralement indiquer une famille de police dont presque tout le monde dispose.

Les grandes familles sont: 'serif', 'sans-serif', 'cursive', 'monospace', 'fantasy'

Exemple: {font-family : monospace}

définit une police de caractères dont tous les caractères ont la même largeur

Style de caractères: font-style

Définit si les caractères sont droits ('normal'), italiques ('italic') ou obliques ('oblique').

Exemple: {font-style : italic}

définit une police en italique

Graisse des caractères: font-weight

Définit si les caractères sont gras ou normaux. Il est possible de définir plusieurs niveaux de graisse: 'normal', 'bold' (gras), 'bolder' (plus gras), 'lighter' (moins gras).

Exemple: {font-weight : bolder}

Ces caractères sont plus gras que dans leur définition 'normale'.

Taille des caractères: font-size

La taille des caractères peut être définie:

en unités courantes: points, pouces, centimètres, pixels;
par des expressions conventionnelles: xx-small, x-small, small, medium, large, x-large, xx-large ;
relativement à la taille normale des caractères: larger, smaller, ou en pourcentage de la taille.

Exemple: {font-size : 0.5cm}

Impose une taille de 0,5 cm pour la police de caractères

En utilisant des styles, définis pour ton document:

des titres de niveau 1 en rouge et en gras ;
des titres de niveau 2 en vert et en italiques ;
un corps de texte en police 'Arial' et en 14pt.

Que va-t-il se passer si une personne qui visualise la page ne dispose pas de la police Arial sur son ordinateur?

Quand tu as appliqué les styles et répondu à la question posée, passe à l'étape suivante.

Formatation des caractères

Attributs des caractères

On peut spécifier si le texte doit être souligné ('underline'), surligné ('overline'), barré ('line-through').

Exemple: {text-decoration : overline}

Détermine l'ajout d'une ligne au-dessus du texte

Alignement horizontal

Définit l'alignement du texte. Les valeurs possibles sont: 'left', 'right', 'center', 'justify'.

Exemple: {text-align : center}

Il faut remarquer que le texte ne peut pas être 'justifié' en utilisant uniquement les codes HTML.

Indentation du texte

Définit un retrait pour la première ligne du paragraphe. La valeur du retrait peut être donnée en taille absolue (en cm, in, px, ...) ou en pourcentage.

Exemple: {text-indent : 2cm}

Détermine un retrait de 2 cm, pour la première ligne du paragraphe concerné par cette instruction.

Hauteur de la ligne

Définit la hauteur de la ligne courante. La hauteur peut être définie en unités courantes, ou en pourcentage.

Exemple: {line-height: 200%}

Détermine une hauteur de ligne double de la hauteur 'normale' définie dans le document.

Dans le document de travail, définis les titre de niveau 1 sur une hauteur de 300% de la hauteur des lignes de texte. De plus, ces titres devront être centrés et soulignés.

Définis les titres de niveau 2 sur une hauteur de 200% de la hauteur des lignes de texte. De plus, ces titres seront surlignés et allignés à droite.

Quand tu maîtrises le fonctionnement des instructions de style définies ici, passe à l'étape suivante.

Caractéristiques du fond de page

- Finalement, on peut donner beaucoup d'informations sur la façon d'écrire. Mais peut-on également préciser des choses sur la décoration de la page? Un 'papier-peint', par exemple?

- Bien sûr, que l'on peut!

Couleur du fond

La couleur de fond de page peut être définie pour un sélecteur particulier en utilisant une instruction de style

Exemple: { background-color: green }

Définit la couleur verte comme arrière-plan pour la partie du texte concernée.

Image d'arrière plan

En HTML, l'image d'arrière plan est définie pour l'ensemble de la page. Les styles permettent de définir une image pour l'une ou l'autre partie du texte exclusivement.

Dans le document de travail, définis une couleur d'arrière-plan pour les titre de niveau 1 et de niveau 2. Ces deux couleurs devraient être différentes.

Quand tu maîtrises le fonctionnement des instructions de style définies ici, passe à l'étape suivante.

Feuilles de style et Dreamweaver 2

- C'est fort bien, ces directives de style incorporées au document HTM, mais je ne vois pas quel intérêt cela présente par rapport au 'formatage' classique pour mettre en gras ou en couleur, par exemple.

- Effectivement, dans ce cas, l'intérêt est relativement faible, sauf si l'on veut 'formater' un grand nombre d'éléments de la même façon dans un document. Mais cela devient très intéressant quand on utilise une feuille de style pour 'formater' tout un site web de plusieurs centaines de pages. Voyons cela.

L'ensemble des directives données peut être groupé dans un document qui ne sert qu'à contenir des directives de style: on parle alors d'une feuille de style. Les feuilles de styles liées sont des outils extrêmement puissants.

Il suffit d'établir un lien entre un document HTML et une feuille de style pour que toutes les directives soient appliquées à la page HTML.

L'établissement d'une feuille de style est très simple: il suffit de confectionner un document qui contient exclusivement:

une balise <style>
un certain nombre de directives de style
une balise </style>

Un tel document peut être rédigé à l'aide de n'importe quel logiciel capable d'enregistrer un document en mode texte.

La feuille de style se reconnaît à son extension 'CSS'.

- Mouais, cela veut donc dire qu'il faut s'encombrer d'un logiciel de traitement de textes en plus de Dreamweaver. Vous ne trouvez pas que ça commence à faire un peu désordre?

- Pas tout à fait, puisqu'il est également possible d'établir une feuille de style avec Dreamweaver 2. Magique, non?

Fabriquer une feuille de style externe avec Dreamweaver 2

1.	Dans le menu Texte, choisis la commande Style personnalisé puis Editer Feuille de style

2.	Dans la boîte de dialogue Éditer Feuille de style, clique sur Lien.

3.	Effectue l'une des opérations suivantes : Entre le chemin d'accès à la feuille de style externe dans le champ Fichier/URL (pour modifier une feuille de style existante). Crée une nouvelle feuille de style externe en entrant un nom de fichier qui n'existe pas à l'emplacement spécifié. Les feuilles de style externes doivent se terminer par l'extension .css.

4.	La feuille de style externe apparaît avec le mot 'lien' à la suite du nom, dans la liste des styles de la boîte de dialogue Éditer Feuille de style. Double-clique sur le nom de la feuille de style. Une seconde boîte de dialogue Éditer Feuille de style apparaît. Cliquez sur Nouveau pour définir les styles dans la feuille de style externe.

5.	Dans la boîte de dialogue Nouveau style, choisis l'option Redéfinir la balise HTML, puis sélectionne la balise à redéfinir dans la liste déroulante (les deux autres options ne seront pas envisagées dans cette leçon). Tu disposes alors d'une fenêtre dans laquelle tu pourras définir entièrement les caractéristiques du style lié à la balise HTML.

6.	Quand tu as fini, clique sur OK. De retour dans la boîte de dialogue Editer Feuille de style, clique sur Terminé.

Quand tu as bien compris l'intérêt de la liaison des feuilles de style, passe à l'étape suivante.

Liaison des feuilles de styles

- Mouais, bon! Si je comprends bien, je viens de fabriquer une feuille de style sans le savoir? Je n'aime pas ça, moi: je veux comprendre ce que je fais. On peut la voir quelque part, cette fameuse feuille?

- Malheureusement, Dreamweaver 2 ne permet pas de voir facilement le contenu des feuilles de styles. Il n'est prévu de les modifier qu'en utilisant l'éditeur intégré. Pour réellement voir la feuille de style et son contenu, le plus simple est d'utiliser le bloc-notes de Windows ou un traitement de textes.

- Et cette liaison, alors? On peut la voir où?

- Tout simplement dans le texte du document HTML.

Ouvre la fenêtre de code HTML et, dans l'entête (entre <head> et </head>), repère une ligne du type mis en évidence sur le schéma ci-dessous:

C'est là que se trouve toute la magie de la feuille de style.

Quand tu as bien compris l'intérêt de la liaison des feuilles de style, passe à l'étape suivante.

Feuilles de styles 'en cascade'

- J'ai remarqué que l'on pouvait laisser des balises de format comme <b> et </b> (pour mettre en gras) dans un document HTML lié à une feuille de style. Mais que va-t-il se passer si la feuille de style précise que tel élément est en 'graisse' normale et que dans le document HTML, l'élément est indiqué en gras ? Et que se passe-t-il quand une directive de style interne est en contradiction avec une directive d'une feuille de style: l'une précise que la taille de la police est de 1 cm et l'autre voudrait 0,5 cm ?

- C'est simple, l'ordinateur se met à fumer et explose dans les 10 secondes.

- C'est vrai, ça????

- Bon, pas tout à fait! Pour éviter ce genre de problèmes, certaines conventions ont été prises.

Les directives indiquées sur une feuille de style liée peuvent entrer en contradiction avec les directives données dans la zone <style> ... </style> de la page HTML.

Dans ce cas, les directives incorporées à la page HTML priment.

Les directives données directement dans la page peuvent entrer en contradiction avec les balises HTML.

Dans ce cas, les balises HTML priment sur les directives de style.

Mécanisme de la cascade Pour chaque élément présenté sur la page HTML, le navigateur web évalue, dans l'ordre

les balises HTML ;
les directives de style qui sont données dans la page HTML ;
les directives qui viennent des feuilles de styles liées.

On parle d'un mécanisme 'en cascade', pour la mise en place de la présentation. C'est l'origine de l'expression 'feuilles de styles en cascade', ou 'cascading style sheets' en anglais; ce qui a donné l'extension CSS.

Bravo, tu as fini !!

Droits d'auteur : Yves Mairesse. Ce cours est sous contrat Creative Commons