FAQ Expression Web, SharePoint Designer et FrontPage

 Questions, aides et astuces, provenant au départ du forum microsoft.public.fr.frontpage.

Feuilles de style CSS

Sauter la navigation

 


 1 - Comprendre les feuilles de style
 2 - Qu'est-ce que l'effet de cascade?
 3 - Modifier la police et la couleur des liens dans tout le site
 4 - Comment utiliser un fichier .css existant
 5 - Comment créer un fichier .css
 6 - À quoi servent chacun des volets de style?
 7 - Problème des styles dans FrontPage 2000
 8 - Valider une feuille de style
 9 - Adresses de référence
10 - N'imprimer qu'une partie de la page
 

1 - Comprendre les feuilles de style

Question 1 On me suggère d'utiliser des CSS ou des feuilles de style. Mais en pratique, qu'est-ce que c'est?

Réponse 1 Il existe trois façons d'indiquer la mise en forme (police, gras, italique...) dans une pages Web. On les appelle les "feuilles de style en cascade" ou CSS (pour Cascading Style Sheets).

- La "feuille de style en cascade en ligne" indique une commande placée directement dans le texte de la page. Par exemple (dans FrontPage), quand on sélectionne des paragraphes et qu'on change leur police, la balise <font> est insérée dans le code HTML et elle sera répétée autant de fois que nécessaire, pour chacun des paragraphes.

- La "feuille de style en cascade interne" indique des commandes placées dans la section <head>, au début du code de la page Web. Les instructions de mise en forme n'y sont indiquées qu'une seule fois et s'appliquent à toute la page. (Dans les logiciels récents, comme Expression Web et SharePoint Designer, tous les formats appliqués directement à un élément sont inscrits automatiquement dans la feuille de style interne, devenant alors disponibles pour être réutilisés.)

- La "feuille de style en cascade externe" regroupe toutes les commandes de mise en forme dans une seule page ayant l'extension .css. Cette feuille est alors liée à toutes les pages du site Web. Cette méthode est très avantageuse, car elle réduit la taille de chaque page, ce qui permet de les afficher plus rapidement. La mise en forme étant séparée du contenu, la mise à jour du site s'en trouve simplifiée. De plus, l'utilisation des feuilles de style externe permet de créer des pages plus accessibles pour tous les types de navigateurs. (Un exemple: les navigateurs incluent pour la plupart la possibilité de surfer avec une feuille de style personnalisée, ainsi un mal voyant peut forcer des couleurs contrastées .)

Retour au début

2 - Qu'est-ce que l'effet de cascade?

Question 2 Si on me dit que l'effet de cascade empêche un style de s'appliquer, de quoi s'agit-il?

Réponse 2 L'effet de cascade n'est pas négligeable: le style intraligne (le format placé près d'un élément) est toujours prioritaire, ensuite c'est le style placé dans la section <head> de la page qui s'applique, sinon c'est celui provenant de la feuille de style externe.

Voici un peu d'informations sur le principe de cascade, dans un fichier pdf:
http://louise.mvps.org/volumes/ExtraitEW2.pdf

Retour au début

 

3 - Modifier la police et la couleur des liens dans tout le site

Question 3 Comment peut-on appliquer une police à l'ensemble du site ou modifier les couleurs de tous les liens?

Réponse 3 La meilleure façon de modifier la police de base, c'est de modifier le style appliqué à la balise body, car elle englobe tout le contenu de la page. Vous en trouverez un exemple dans la rubrique Polices.

Pour les couleurs des liens, voir la rubrique Liens hypertexte #8.
Pour des blocs de liens formatés avec des styles, voir Menus #2.

Dans Expression Web et dans SharePoint Designer, le changement de la police se fait à partir du volet Gérer les styles:
- ouvrez le modèle Web dynamique ou la feuille de style appliquée au site,
- affichez le Volets de tâches - Gérer les styles,
- dans ce volet, cliquez avec le bouton droit sur 'body', choisissez Modifier le style,
- dans la zone Police, sélectionnez une famille dans 'font-family'...

Retour au début

4 - Comment utiliser un fichier .css existant

Question 4 J'ai importé une feuille de style (un fichier .css). J'ai besoin de conseils pour l'insérer dans un site en construction.

Réponse 4 Pour lier la feuille de style .css avec toutes les pages du site, ouvrez une page Web. Choisissez successivement Format - Styles CSS - Attacher une feuille de style - Toutes les pages HTML - Attacher comme Lien - bouton Parcourir, puis sélectionnez le fichier .css. (Dans FrontPage 2003, l'équivalence se trouve au menu Format - Liens de feuille de style - Toutes les pages - bouton Ajouter...)

Mais, si vous avez déjà attribué du gras, de l'italique ou une police à un élément de la page, ce style en ligne s'affichera en priorité au lieu du style de la feuille externe. Pour enlever le style en ligne, sélectionnez toute la page (ou le paragraphe), puis au menu Format, choisissez Supprimer la mise en forme.

Ensuite, dans la zone Style (au début de la barre d'outils Mise en forme), vous pourrez choisir le style de certains paragraphes, comme Titre 1, Titre 2... La mise en forme est alors ajustée selon le contenu de la feuille de style.
 
Pour modifier au besoin les couleurs (et autres formats) provenant d'un style, voyez la question 6, plus bas.

Retour au début

5 - Comment créer un fichier .css

Question 5 Je voudrais créer un fichier externe contenant toute la mise en forme pour mon site Web. Comment puis-je faire?

Réponse 5 Partie 1 - Avec Expression Web ou SharePoint Designer 2007
Pour créer une nouvelle feuille de style (fichier .css), utilisez le menu Fichier - Nouveau - Page - Feuille de style, sélectionnez celui vide ou un des modèles.

Pour établir un lien entre les pages et le fichier de la feuille de style, affichez le volet Gérer les styles, cliquez sur le lien au début du volet: Attacher une feuille de style.

Pour créer un nouveau style, en haut du volet Gérer les styles, cliquez sur le lien Nouveau style. Dans la fenêtre Nouveau style, vérifiez la zone Définir dans (Page active, Nouvelle feuille de style ou Feuille de style existante).

Pour modifier un style existant, dans le volet Gérer les styles, cliquez avec le bouton droit sur son nom et choisissez Modifier le style.


Partie 2 - Avec FrontPage

Pour créer la feuille de style externe, au menu Fichier, choisissez Nouveau. Avec FrontPage 2002, sélectionnez Page ou site Web, puis Modèles de page (avec FrontPage 2003, cliquez plutôt sur le lien Autres modèles de pages). Dans l'onglet Feuilles de style, sélectionnez Feuilles de style Normal; enregistrez ensuite la nouvelle page avec une extension .css.

Les commandes de styles peuvent être tapés directement dans cette page .css. Mais vous pouvez aussi les définir à partir d'un menu lorsque la page .css est ouverte. Dans ce cas, au menu Format, Style, sélectionnez un style (si nécessaire, choisissez Balises Html dans la zone Lister), puis cliquez sur les boutons Modifier, Format; sélectionnez Police ou Paragraphe ou autre et faites les choix voulus.

Ensuite, pour lier des pages Web avec la feuille de style externe, sélectionnez le nom des pages en mode Dossiers, puis au menu Format, Liens de feuille de style, cliquez sur le bouton Ajouter et choisissez la page .css voulue.

Note 1: Un détail à remarquer: lors de la création des styles, ce sont les balises du code Html qui sont offertes (comme h1, h2, p...) mais pour les appliquer avec le bouton Style, c'est plutôt leur nom qui apparaît (comme Titre 1, Titre 2, Normal...)

Note 2: Au besoin, les feuilles de style doivent être autorisés dans FrontPage: au menu Outils, Options de page, onglet Opérations d'auteur (ou onglet Compatibilité), cochez les options CSS 1.0 et CSS 2.0.

Retour au début

6 - A quoi servent chacun des volets de styles?

Question 6 Dans Expression Web, la difficulté que je rencontre maintenant, c'est de comprendre, dans le volet des tâches, ce qui est modifiable avec chacune des commandes "Propriétés de la balise" , "Propriétés CSS" et "Gérer les styles"?

Réponse 6 Vous pouvez souvent utiliser un outil ou l'autre pour obtenir un résultat équivalent.

Quand je travaille, j'affiche toujours le volet "Gérer les styles" parce qu'il offre la liste de tous les styles disponibles, c'est-à-dire ceux déjà définis dans la page active et dans le feuille de style liée. (A noter: le bouton Options en haut de ce volet permet de ne voir que les styles appliqués dans la page, ceux à la sélection ou de tout afficher.) Dans ce volet, un simple clic droit sur un style permet alors de l'appliquer ou de le modifier. De plus, l'option "Sélectionner tout : x instances" montre si le style est utilisé ou non.

Dans le volet "Appliquer les styles", j'utilise surtout le lien "Effacer les styles", très pratique pour enlever tous les formats appliqués à la sélection.

Mais quand les styles sont emmêlés et que le résultat obtenu n'est pas celui attendu, j'ouvre le volet "Propriétés CSS". Il donne la liste des styles applicables à l'endroit où se trouve le curseur. Les règles qui ne s'appliquent pas (pour des raisons de priorité entre elles ou parce que non héritées d'un niveau à l'autre) sont alors rayées. En immobilisant la souris sur un élément rayé, j'en vois la raison (du genre "Telle propriété est remplacée par telle règle"). Les propriétés des styles peuvent être modifiées directement dans ce volet.

Le volet "Propriétés de la balise" présente plutôt les attributs qui pourraient être placés directement à la suite de la balise dans le code HTML, comme sa langue, son titre ou un style intraligne.

Note: ces outils sont les mêmes pour Expression Web et SharePoint Designer 2007.

Retour au début

 

7 - Problème des styles dans FrontPage 2000

Question 7 Impossible de modifier une feuille de style dans FrontPage 2000. Quand je crée une page css et l'enregistre immédiatement, pas de problème. Mais si je modifie cette page puis l'enregistre, le logiciel plante, avec un message "RunTime Error - Abnormal program termination".

Réponse 7 Ce problème se présente parfois dans FrontPage 2000 avec les feuilles de style. Un truc serait de modifier le fichier css avec le Bloc-notes:
- dans FrontPage, au menu Outils, Options, onglet Configurer les éditeurs, choisir d'ouvrir les fichiers .css avec le Bloc-notes (notepad.exe);
- ou, pour modifier un fichier css, clic droit sur son nom, choisir les options Ouvrir avec, Éditeur de texte notepad.exe;
- ensuite, pour afficher le changement dans une page .htm liée à la feuille de style, utiliser la touche F5.

Mais le menu "Format-Style" pourrait quand même être utilisé pour modifier la page CSS. Dans ce cas, au lieu de l'enregistrer, son contenu pourrait être copié/collé dans le Bloc-notes.

Retour au début

8 - Valider une feuille de style

Question 8 Existe-t-il des outils pour vérifier la qualité de ma page CSS?

Réponse 8 Dans Expression Web et SharePoint Designer, pour vérifier la qualité des styles utilisés, utilisez le menu Outils - Rapports CSS. Vous pourrez voir la liste des styles non utilisés et de ceux non définis.

Avec FrontPage, voyez plutôt un site Web externe, comme:
 http://jigsaw.w3.org/css-validator/

Pour plus d'informations:
http://msdn.microsoft.com/fr-fr/library/cc294903%28v=Expression.10%29.aspx

Retour au début

9 - Adresses de référence

Question 9 Où puis-je trouver plus d'informations sur les feuilles de style CSS?

Réponse 9 Pour une vue d'ensemble des feuilles de styles dans Expression Web:
http://msdn.microsoft.com/fr-fr/library/cc295521%28v=Expression.10%29.aspx

Et quelques articles complémentaires:
http://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade
http://www.alsacreations.com 
http://actuel.fr.selfhtml.org/
 
Pour comprendre les différences d'affichage entre les navigateurs et les points à vérifier:
http://www.siteduzero.com/tutoriel-3-12585-introduction.html
http://www.alsacreations.com/actu/lire/194-mthodologie-pour-rsoudre-les-problmes-daffichage-en-css.html
http://edu.ca.edu/cours-web/sites-web-statiques/css-feuilles-de-styles/css-conseils-pratiques

Retour au début

10 - N'imprimer qu'une partie de la page

Question 10 Si quelqu'un avait un bout de code pour indiquer "Imprimer à partir de là jusque là", ce serait super..

Réponse 10 Voici une méthode pour n'imprimer qu'une section de la page, sans les menus, sans les publicités, seulement le texte pertinent, par exemple un formulaire:
1. prévoir les sections à masquer;
2. créer une feuille de style pour l'impression;
3. inscrire la feuille de style dans l'en-tête de la page Web.


1. Les sections à masquer, celles qui ne seront pas imprimées, doivent être encadrées par des balises de division <div>. Repérez les balises head, body et form qui sont déjà en place dans le code de votre page Web. Ajoutez les balises div juste avant ou juste après, un peu comme dans cet exemple:

  <body>
  <div id="avant">
  ...
  </div>
  <form action="envoi.php" method="post">
  ...
  </form>
  <div id="fin">
  ...
  </div>
  </body>

Note: cet exemple ne serait pas valable si votre page était construite avec un seul grand tableau de disposition. Et si vous utilisiez déjà des balises div, il faudrait ajuster cet exemple en fonction de ce qui existe déjà.


2. La feuille de style externe est un simple document de type texte avec l'extension ".css". Dans Expression Web, elle peut être faite à partir du menu Fichier, Nouveau, Feuille de style CSS. Dans FrontPage 2003, utilisez le menu Fichier, Nouveau, Autres modèles de pages, onglet Feuilles de style, Feuille de style normal (sinon, la page CSS peut être préparée dans le Bloc-notes). Enregistrez la page sous le nom de "imprime.css" et tapez-y ce texte:

  #avant{
  display : none;
  }
  #fin {
  display : none;
 }


3. Dans votre page de formulaire, ajoutez un lien vers la feuille de style, dans la section d'en-tête <head>, en précisant media="print":
  <head>
  ...
  <link rel="stylesheet" type="text/css" href="imprime.css" media="print" />
  ...
  </head>

Voici quelques adresses complémentaires:
http://www.alsacreations.com/tuto/lire/586-feuille-css-impression.html
http://www.pompage.net/pompe/impression/
http://actuel.fr.selfhtml.org/articles/css/mise_en_page_imp/

Retour au début