Dreamweaver dispose d'une aide en ligne assez développée
à propos des feuilles de styles (allez dans l'aide et cherchez
«styles» dans l'index). Malheureusement, la rédaction de
cette aide s'appuie sur une connaissance de base du HTML et de son jargon,
connaissance minimale certes, mais peut-être encore hors de portée
d'un débutant. Nous allons essayer de démarrer à un niveau
plus élémentaire, mais nous renverrons ensuite le lecteur
à l'aide de Dreamweaver pour le détail des multiples
propriétés... à quelques remarques près, pour
dissiper quelques obscurités nées d'une francisation
incomplète ou discutable du logiciel.
Nous nous référerons à la version 2 ; les
versions suivantes sont restées très voisines dans ce domaine
des styles.
Dreamweaver permet de faire des feuilles de style externes et internes. On
peut aussi introduire des styles locaux, mais uniquement à travers
des classes préalablement définies dans les
feuilles ; nous reviendrons sur ce point dans la suite.
En toute logique les feuilles externes sont plus importantes que toutes les
autres formes de style et nous commencerons par là ; et comme nous sommes
nous-même passé par quelques moments de perplexité en
lisant l'aide en ligne, nous allons détailler le processus plus
finement que ne fait cette aide.
Au moment de créer une feuille de style externe, vous devez avoir
commencé la première page de votre site, du moins la
première qui utilisera des styles externes. Il est inutile d'avoir
achevé cette page, mais avoir entré quelques titres et
paragraphes permettra de contrôler l'effet des styles.
- Ouvrir la fenêtre des styles (menu
Fenêtres>Styles)
- Cliquez le bouton Editer
- Une nouvelle boîte de dialogue
«Editer feuille de style» s'ouvre.
Cliquer sur le bouton
Liens.
- Une nouvelle boîte
«Ajouter une feuille de style externe» s'ouvre.
Dans la
case Fichier/URL, entrez le nom de votre future feuille de
style ; quelque chose comme monstyle.css (il faut
que ça se termine par .css). En dessous, le bouton
«Ajouter sous lien» doit rester coché.
Cliquez sur OK
- Vous êtes de retour dans la boîte
«Editer feuille de style»,
mais avec maintenant une nouvelle
écriture comme
monsite.css (lien) dans le cadre en haut
à gauche. Sélectionnez cette ligne puis cliquez sur le
bouton Editez.
- Une nouvelle boîte de dialogue s'ouvre, identique à
la précédente, mais intitulée
«monsite.css»
(c.à.d. du nom de votre feuille externe).
Cliquez cette fois sur le bouton Nouveau.
Par exemple, pour mettre un fond jaune dans la page,
(i) cliquez le bouton
redéfinir balise HTML, choisissez «Body» dans le
sélecteur et cliquez «OK».
(ii) Une nouvelle boîte «Définition du style
pour BODY» s'ouvre. Dans le cadre Catégories,
cliquez sur Arrière-plan
(iii)
vous devez alors avoir un bouton Couleur d'arrière- plan sur
la droite. Cliquez dessus, choisissez un jaune, puis cliquez sur le
bouton général «OK» de la boîte.
- Un nouvelle boîte de dialogue «Nouveau style»
s'ouvre avec trois
options :
— Créer un style
personnalisé (classe)
— Redéfinir la balise HTML
— Utilisez le sélecteur CSS
Nous examinerons plus
loin ces différentes options (nous commencerons par la deuxième, parce que
le plus urgent pour la première feuille de style du site est
précisément de redéfinir ces fameuses balises
HTML) ; pour le moment faites
un peu n'importe quoi, par exemple ce qui est détaillé ci-contre.
- Une fois terminées les opérations avec cette nouvelle
boîte, on nous ramène sur la boîte
«monsite.css».
On pourrait alors reprendre le bouton Nouveau pour définir
d'autres règles de style, après quoi on nous ramènera à nouveau sur
cette boîte «monsite.css».
A chaque fois, le cadre de gauche donne une indication mnémonique
des styles ainsi définis, sur lesquelles on pourra
éventuellement revenir (par sélection de la ligne
appropriée puis le bouton Editer). A la fin, on validera
tout le travail effectué sur la feuille externe en cliquant sur le
bouton Enregistrer.
- On est alors de retour sur la boîte
«Editer feuille de style»
(en fait, cette boîte est un résumé
de toutes les feuilles de style externes et internes s'appliquant à la
page). Pour revenir sur notre feuille externe, il faudra sélectionner sa
ligne
monsite.css (lien), et cliquer, soit sur
Nouveau pour ajouter de nouvelles instructions, ou sur
Editer pour revenir sur les anciennes instructions ou en rajouter de
nouvelles.
On cliquera sur Terminé pour fermer cette boîte de dialogue
et revenir à l'édition de la page HTML proprement dite.
(Retour au menu)
Redéfinir les balises HTML
Cette option se présente dans la boîte de dialogue
«Nouveau style». Il faut alors choisir l'une de ces
fameuses balises par le sélecteur en bas de la boîte, et le choix proposé
va immanquablement laisser le néophyte perplexe :
a address b blockquote body br cite code dd dfn div dl dd dt em
h1 h2 h3 h4 h5 h6 hr i img kbd li ol p
pre s samp span strong table td th tr tt u ul
var
Il s'agit de toutes les commandes du HTML classiques. Nous avons mis en
gras les plus importantes, celles qu'il va falloir comprendre un peu
pour avancer. Elles se répartissent en 5 groupes
- body commande l'ensemble de la page, et notamment le
fond de la page (couleur ou image de fond). On peut aussi y définir
la présentation générales des caractères dans
la page (police, taille, couleur, etc...)
- p commande la présentation générale des
paragraphes. En principe, on devrait hériter du style
précédent pour le body en ce qui concerne les
caractères, mais il vaut mieux tout répéter...
- td commande la présentation dans les cellules des tables.
A nouveau, on devrait hériter du body pour les caractères, mais
NN4 ne l'entend pas ainsi... Et donc, on répète.
- ul, ol et li commandent la présentation
des listes à puce (ul), des listes numérotées (ol)
et de chacun de leurs articles (li). A nouveau,
l'héritage du body devrait être assumé, mais...
- h1, h2... h6 commandent la présentation des
différents niveaux de titres obtenus par les menus
Texte>Format>En-tête1, En-tête2, etc... .
On peut très bien ne pas
les redéfinir. Dans ce cas, le navigateur utilisera ses
réglages par défaut pour choisir la taille et la graisse,
à partir du type de caractère hérité du
body. Mais on peut aussi préférer tout
contrôler soi-même.
Si on redéfinit ces balises h1, h2...,
il est très important de conserver
leur signification logique (h1 pour les titres les plus importants,
h2 pour des titres de 2ème niveau, etc...). De cette manière, si la
page est lue avec un navigateur qui ne comprend pas les styles,
l'importance relative des différents titres et la structure logique
de la page seront préservées.
Quelle que soit la balise choisie, on arrivera toujours à la
même boîte dialogue «Définition du style pour
[la balise] dans [le fichier externe]», boîte fort complexe
avec 8 volets indépendants :
Type Arrière-plan Bloc Boîte Bordure Liste Positionnement
Extension
On ne remplira que les volets intéressants pour la balise
concernée, sachant (un peu) à quoi sert cette balise et
à quoi correspondent ces différents volets. Comme cette
boîte reviendra pour n'importe quelle demande de création ou de
modification de style, nous lui consacrerons un paragraphe spécial
un peu plus loin.
Pour le moment, vous pouvez faire un peu n'importe quoi et
finalement enregistrer la feuille externe «monsite.css»
(Retour au menu)
Créer un style personnalisé
(classe)
Dans la suite, nous dirons plus simplement «classe de style»
ou, plus brièvement, «classe». De telles classes sont
tout simplement une collection d'instructions de style (sur les polices, la
taille, l'arrière-plan, les marges etc...) susceptibles de s'appliquer
à un peu n'importe quoi dans la page. On leur attribue un nom,
commençant obligatoirement par un point, comme .maclasse
(DW2 rajoutera fort obligeamment ce point si vous l'oubliez, mais ne prenez
pas de mauvaises habitudes :-).
Pour créer ces classes dans votre feuille externe,
en repartant de la fenêtre «Styles» (menu
Fenêtre>Styles) :
- cliquez sur le bouton Editer.
- La boîte «Editer feuille de style» s'ouvre.
Sélectionnez la ligne du fichier externe, puis cliquez le bouton
Nouveau.
- La boîte «Nouveau style» s'ouvre. Choisissez
l'option Créer un style personnalisé (classe) et
mettez le nom de votre choix dans la case du bas. A titre d'exemple, nous
allons prendre «.rouge», pour créer un
arrière-plan rouge. Validez par OK.
- Dans la boîte «Définition du style pour .rouge
dans [fichier externe]», prenez le volet Arrière-plan,
cherchez un rouge qui vous plaise sur la première ligne
Couleur d'arrière-plan, puis validez par OK
- De retour dans la boîte d'édition du fichier externe,
cliquez sur Enregistrer
- De retour dans la boîte «Editer feuille de style»,
cliquez sur Terminé
Dans la fenêtre des styles, vous devez maintenant avoir au moins deux
lignes : (aucun) (ligne par défaut) et une nouvelle ligne
rouge, qui correspond à notre nouvelle classe. Son emploi
est très intuitif: sélectionnez n'importe quoi dans votre
page, puis cliquez sur la ligne rouge dans la fenêtre des
styles : le fond de la sélection passe au rouge (enfin, une fois
désélectionnée...). Si vous changiez d'avis et que vous
vouliez enlever ce style, refaites la sélection et cliquez sur
(aucun) dans la fenêtre des styles.
Encore plus expéditif, faites une sélection, puis faites un
clic-droit (ou CTRL-clic sur MacOS) ; il s'ouvre un menu contextuel dont la
ligne Style personnalisé vous indique les classes parmi
lesquelles choisir. Si vous ne faites pas de sélection au
prélable, la classe va s'appliquer à tout le paragraphe
situé sous la souris.
Pour créer des classes internes à la pages, qui ne
serviront donc que pour cette page, on suivra les mêmes
opérations, à ceci près qu'à
l'étape (2), il ne faudra pas sélectionner
la ligne du fichier externe avant de cliquer sur le bouton Nouveau.
La nouvelle classe apparaîtra dans la fenêtre des styles de
la même façon que les classes externes.
(Retour au menu)
Les huit volets de la
boîte «Définition du style»
Nous n'allons pas détailler la multitude des options possibles
dans ces huit volets. La plupart parlent d'elles-mêmes. Pour les autres,
on pourra se reporter aux explications de l'aide en ligne.
Lisez néammoins les explications ci-dessous et dans les pages qui
suivent !
- Type
- Honte à celui qui a francisé le logiciel !
Le mot anglais «Type» aurait dû être remplacé
par «caractères» (d'imprimerie).
Si vous êtes perplexes devant la multiplicité des options offertes
pour définir la taille des caractères,
lisez nos explications ! Et
lisez-les aussi si vous ne ressentez aucune inquiétude, car il y a des
pièges à éviter, non documentés dans l'aide en ligne
:).
- Bloc
- Il faut comprendre «bloc de texte». C'est
là qu'on décidera notamment de la justification
et du retrait en tête des paragraphes (alinéas).
- Arrière-plan
- Ce volet ne sert qu'à fixer la couleur des fonds ou les images
d'arrière plan. Il s'applique évidemment l'ensemble de la page
(balise HTML body), mais aussi à n'importe quel bloc. Comme on
verra plus tard que
tout est bloc dans une page HTML, on peut l'appliquer
à n'importe quoi... avec précaution (:-))
- Boîte
- Ce volet sert précisément à définir
les propriétés «géométriques» des blocs :
largeur, hauteur, insertion flottante ou non, marges externes ou
internes. Tout cela devrait s'éclaircir après
notre page sur les blocs
dans une page HTML.
- Positionnement
- Ce volet s'applique essentiellement aux calques, c.à.d. une
variété particulière et très importante de ces
blocs, dont nous expliquons plus loin la nature.
- Bordure
- Ce volet est un complément des deux volets précédents sur
les blocs. Il ne sert qu'à définir les paramètres d'une bordure
éventuelle autour de ces fameux blocs.
- Liste
- Ce volet s'applique évidemment au rendu des listes à puce
ou listes numérotées. Mais il ne couvre pas des paramètres
importants comme les
retraits sur la gauche ou l'espacement entre les différents éléments
d'une liste, pour lesquels il faudra jouer sur les marges internes ou
externes pour les balise HTML ul, ol
et li (ou dl, dd
et dt pour les listes en pur texte)
- Extensions
- Bof... ça ne devrait pas souvent servir.
(Retour au menu)
Utiliser le sélecteur CSS
C'est le troisième choix possible dans la boîte
«Nouveau style». Nous n'avons trouvé aucune
explication à son sujet dans l'aide en ligne, mais ce n'est pas
trop compliqué à comprendre. Et, en fait, il est même très
important de s'en servir !
Cela va avoir notamment deux grandes applications :
- définir le style général des liens sous leurs quatre parfums
possibles. Pour cela, allez au sélecteur en bas de la fenêtre ;
vous y trouvez 4 noms prédéfinis :
a:link : liens non visités
a:visited : liens visités
a:hoover : liens survolés par la souris
a:active : lien en cours de clic, c.à.d. quand vous avez
enfoncé le bouton sans le relâcher.
Si vous prenez l'un de ces quatre choix, vous arrivez devant la fenêtre
de définition du style et ses 8 volets. Vous pouvez alors spécifier la
police, la couleur, la graisse, etc... Ce style pourra être inclus dans
votre feuille externe (pour tout le site) ou bien dans les styles
internes spécifiques à la page. Attention toutefois aux
conflits entre styles externes et internes, le gagnant dépend du
navigateur !
- donner un style spécifique aux calques. Ceux-ci ont un nom (que
l'on voit à gauche de l'inspecteur de propriété une
fois le calque sélectionné ; par défaut, Dreamweaver
les appelle Layer1, Layer2,etc... mais vous pouvez changer ce nom comme
vous le voulez dans l'inspecteur). Pour donner un style particulier à un
calque, entrez le nom de ce calque précédé de # dans la case
de texte de la boîte «Nouveau
Style» (par exemple #Layer1 pour la calque Layer1),
puis cliquez sur OK et cochez les options de votre choix.
Attention toutefois au volet «Positionnement» où certaines options
risquent d'être en conflit avec le statut de calque tel que le comprend
DW2.
Ce sélecteur CSS offre aussi une voie alternative pour créer des styles
personnalisés. Il suffit d'entrer un nom commençant par un point (comme
«.mon_style»). Si vous oubliez le point, DW2 ne vous fera pas de
remarque, mais ne rajoutera pas le point et ce style sera inutilisable.
(Retour au menu)
Mais il en manque pas mal...
Bien qu'on puisse accéder à de très nombreuses options, il y a beaucoup
de propriétés de style auxquelles Dreamweaver ne donne pas accès si on
refuse de rentrer dans le code.
Tout d'abord, à en croire sa documentation, qu'il s'agisse
du vieux DW2 ou de la dernière version DW4 de ce
début 2002, il se limite aux recommandations CSS1 du
consortium W3C. Ce n'est pas vraiment exact.
D'un côté, il ne donne pas accès à toutes les propriétés
prévues dans le document CSS1 : par exemple, il ignore complètement la propriété
display qui a pourtant
des applications très
intéressantes.
Concernant l'architecture de la page, il ne donne pas accès à des blocs
DIV qui ne soient pas des calques. Par exemple, le petit jeu
ci-dessous
qui ne demande qu'une seule classe de style sur des blocs DIV emboîtés
n'est pas réalisable sans intervention dans le code. Il y a donc des
effets de rendu qui ne seront pas à la portée du profane, et
des effets pas forcément aussi acrobatiques que l'amusette ci-dessus.
D'un autre côté, DW2 avait anticipé sur plusieurs
des propriétés CSS2, quelques unes absolument fondamentales
(visibilité et empilement des calques), et d'autres beaucoup plus anecdotiques
(forme du curseur). Mais même avec DW4, on ne peut toujours pas accéder
directement à d'autres propriétés très
intéressantes, comme les pseudo-classes (lien, first-letter, etc...) que nous
verrons plus loin.
