 |
| |
Feuilles de style avec Dreamweaver
| Feuilles de style avec Dreamweaver |
| |
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. Vous aurez plus d'explication
par ici
que tu peux aller consulter. Mais vois également les explications
qui suivent.
- 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:
<style>
H1 {color : blue}
</style>
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:
| 1. |
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: |
<style>
H1 {color : blue ; font-size : 1cm}
</style>
|
|
| 2. |
Pour des sélecteurs différents:
on indique les instructions complètes sur des lignes
différentes.
| Exemple: |
<style>
H1 {color : red}
H2 {color : yellow}
</style> |
|
|
|
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.
Exemple: { background-image: url(images/ant.gif) }
Définit
l'image "ant.gif", qui se trouve dans le dossier "images"
du dossier courant, comme image d'arrière-plan. Cette image
n'interfère pas avec l'image d'arrière plan de la
page.
|
|
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.
 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
|
| |
| | |
Cours informatique
